@capillarytech/creatives-library 7.5.4 → 7.5.6

package/v2Containers/Facebook/Advertisement/index.scss

@@ -0,0 +1,49 @@
+@import '~@capillarytech/cap-ui-library/styles/_variables.scss';
+
+$classPrefix: add-facebook-ad-section;
+
+.#{$classPrefix} {
+    .cap-input-wrapper{
+    padding-bottom: 24px;
+    width: 460px;
+    }
+    .cap-tab-v2-wrapper {
+        .ant-tabs-bar.ant-tabs-top-bar {
+          padding: 0;
+        }
+    }
+    .cap-header-facebook-ad{
+        position: fixed;
+        top: 27px;
+        z-index: 1000;
+        .title-desc-container{
+            padding-left: 10px;
+        }
+        .component-with-label{
+            display: inline-block
+        }
+    }
+    .extra-button-group {
+        button {
+            padding: 0;
+            margin-left: 6px;
+        }
+    }
+    .cap-image-upload-CAROUSEL{
+        .dragger-button.re-upload{
+            margin-top: 90px;    
+            top: 0;
+            position: absolute;
+            right: 80;
+            color: $FONT_COLOR_05;
+        }
+    }
+    .facebook-ad-type-card{
+        .ant-card-body {
+            display:flex;
+            flex-direction: row-reverse;
+        }
+    }
+    
+    
+}

package/v2Containers/Facebook/Advertisement/messages.js

@@ -0,0 +1,155 @@
+import { defineMessages } from 'react-intl';
+
+const messagePrefix = 'creatives.containersV2.Facebook.Advertisement';
+
+export default defineMessages({
+  creativeName: {
+    id: `${messagePrefix}.creativeName`,
+    defaultMessage: 'Creative name',
+  },
+  AdvertisementType: {
+    id: `${messagePrefix}.AdvertisementType`,
+    defaultMessage: 'How you would like your ad to look?',
+  },
+  imageVideoTitle: {
+    id: `${messagePrefix}.imageVideoTitle`,
+    defaultMessage: 'Single image or video',
+  },
+  imageVideoDesc: {
+    id: `${messagePrefix}.imageVideoDesc`,
+    defaultMessage: 'Create an Ad with one image or video, or a slideshow with multiple images',
+  },
+  carouselTitle: {
+    id: `${messagePrefix}.carouselTitle`,
+    defaultMessage: 'Carousel',
+  },
+  carouselDesc: {
+    id: `${messagePrefix}.carouselDesc`,
+    defaultMessage: 'Create an Ad with 2 or more scrollable images or videos',
+  },
+  primaryText: {
+    id: `${messagePrefix}.primaryText`,
+    defaultMessage: 'Primary text',
+  },
+  primaryTextPlaceholder: {
+    id: `${messagePrefix}.primaryTextPlaceholder`,
+    defaultMessage: 'Enter text that clearly tells people about what you are promoting',
+  },
+  primaryTextToolTip: {
+    id: `${messagePrefix}.primaryTextToolTip`,
+    defaultMessage: 'Facebook recommends 125 characters or fewer.',
+  },
+  linkHeadline: {
+    id: `${messagePrefix}.linkHeadline`,
+    defaultMessage: 'Link headline',
+  },
+  linkHeadlineToolTip: {
+    id: `${messagePrefix}.linkHeadlineToolTip`,
+    defaultMessage: 'Headlines over 40 characters may be cut off.',
+  },
+  linkHeadlinePlaceHolder: {
+    id: `${messagePrefix}.linkHeadlinePlaceHolder`,
+    defaultMessage: 'Enter the short headline',
+  },
+  linkDesc: {
+    id: `${messagePrefix}.linkDesc`,
+    defaultMessage: 'Link description',
+  },
+  linkDescToolTip: {
+    id: `${messagePrefix}.linkDescToolTip`,
+    defaultMessage: 'Description over 40 characters may be cut off.',
+  },
+  linkDescPlaceHolder: {
+    id: `${messagePrefix}.linkDescPlaceHolder`,
+    defaultMessage: 'Enter the additional details',
+  },
+  webSiteLink: {
+    id: `${messagePrefix}.webSiteLink`,
+    defaultMessage: 'Website link',
+  },
+  websiteLinkPlaceHolder: {
+    id: `${messagePrefix}.websiteLinkPlaceHolder`,
+    defaultMessage: 'Enter the URL for the web page that you want people to visit',
+  },
+  displayLink: {
+    id: `${messagePrefix}.displayLink`,
+    defaultMessage: 'Display link',
+  },
+  displayLinkPlaceHolder: {
+    id: `${messagePrefix}.displayLinkPlaceHolder`,
+    defaultMessage: 'Enter the link that you want to show on your ad',
+  },
+  optional: {
+    id: `${messagePrefix}.optional`,
+    defaultMessage: '(Optional)',
+  },
+  callToAction: {
+    id: `${messagePrefix}.callToAction`,
+    defaultMessage: 'Call to action',
+  },
+  image: {
+    id: `${messagePrefix}.image`,
+    defaultMessage: 'Image',
+  },
+  video_slideshow: {
+    id: `${messagePrefix}.video_slideshow`,
+    defaultMessage: 'Video/Slideshow',
+  },
+  doneButtonLabel: {
+    id: `${messagePrefix}.doneButtonLabel`,
+    defaultMessage: 'Create',
+  },
+  creativesTemplatesEditName: {
+    id: `${messagePrefix}.creativesTemplatesEditName`,
+    defaultMessage: 'Edit name',
+  },
+  clickButtonLabel: {
+    id: `${messagePrefix}.clickButtonLabel`,
+    defaultMessage: 'Continue',
+  },
+  createNotification: {
+    id: `${messagePrefix}.createNotification`,
+    defaultMessage: 'Facebook template created successfully',
+  },
+  editNotification: {
+    id: `${messagePrefix}.editNotification`,
+    defaultMessage: 'Facebook template updated successfully',
+  },
+  duplicateTooltipLabel: {
+    id: `${messagePrefix}.duplicateTooltipLabel`,
+    defaultMessage: 'Duplicate',
+  },
+  shiftLeftTooltipLabel: {
+    id: `${messagePrefix}.shiftLeftTooltipLabel`,
+    defaultMessage: 'Shift Left',
+  },
+  shiftRightTooltipLabel: {
+    id: `${messagePrefix}.shiftRightTooltipLabel`,
+    defaultMessage: 'Shift Right',
+  },
+  deleteTooltipLabel: {
+    id: `${messagePrefix}.deleteTooltipLabel`,
+    defaultMessage: 'Delete',
+  },
+  addCard: {
+    id: `${messagePrefix}.addCard`,
+    defaultMessage: 'Add card',
+  },
+  inValidUrliErrorMessage: {
+    id: `${messagePrefix}.inValidUrliErrorMessage`,
+    defaultMessage: 'Website link is not valid',
+  },
+  newFacebookCreatives: {
+    id: `${messagePrefix}.newFacebookCreatives`,
+    defaultMessage: 'New Facebook creative',
+  },
+  facebookPage: {
+    id: `${messagePrefix}.facebookPage`,
+    defaultMessage: 'Facebook page',
+  },
+  callToActionMandatoryError: {
+    id: `${messagePrefix}.callToActionMandatoryError`,
+    defaultMessage: 'call to action is mandatory for Video Media. Please select call to action ',
+  },
+})
+;

package/v2Containers/Facebook/actions.js

@@ -6,8 +6,70 @@
 
 import {
   GET_MARKETING_OBJECTIVES,
+  UPLOAD_FB_AD_ASSET_REQUEST,
+  CREATE_FACEBOOK_AD_TEMPLATE_REQUEST,
+  EDIT_FACEBOOK_AD_TEMPLATE_REQUEST,
+  GET_FACEBOOK_AD_TEMPLATE_DETAILS_REQUEST,
+  CLEAR_FACEBOOK_AD_ASSET,
+  CLEAR_FACEBOOK_AD_CREATE_RESPONSE_REQUEST,
+  CLEAR_FACEBOOK_AD_DATA,
+  CLEAR_FACEBOOK_AD_EDIT_RESPONSE_REQUEST,
+  GET_ORG_OU_LIST_REQUEST,
 } from './constants';
 
 export const getMarketingObjectives = () => ({
   type: GET_MARKETING_OBJECTIVES,
 });
+
+export const uploadFbAdAsset = (file, assetType, fileParams, templateType) => ({
+  type: UPLOAD_FB_AD_ASSET_REQUEST,
+  file,
+  assetType,
+  fileParams,
+  templateType,
+});
+
+export const createTemplate = (template, callback) => ({
+  type: CREATE_FACEBOOK_AD_TEMPLATE_REQUEST,
+  template,
+  callback,
+});
+
+export const getOrgOUs = (orgID) => ({
+  type: GET_ORG_OU_LIST_REQUEST,
+  orgID,
+});
+
+// FOR EDIT
+
+export const editTemplate = (template, callback) => ({
+  type: EDIT_FACEBOOK_AD_TEMPLATE_REQUEST,
+  template,
+  callback,
+});
+
+export const getTemplateDetails = (id, callback) => ({
+  type: GET_FACEBOOK_AD_TEMPLATE_DETAILS_REQUEST,
+  id,
+  channel: 'FACEBOOK',
+  callback,
+});
+
+export const clearData = () => ({
+  type: CLEAR_FACEBOOK_AD_DATA,
+});
+
+export const clearEditResponse = () => ({
+  type: CLEAR_FACEBOOK_AD_EDIT_RESPONSE_REQUEST,
+});
+
+
+export const clearCreateResponse = () => ({
+  type: CLEAR_FACEBOOK_AD_CREATE_RESPONSE_REQUEST,
+});
+
+export const clearFbAdAsset = (templateType) => ({
+  type: CLEAR_FACEBOOK_AD_ASSET,
+  templateType,
+});
+

package/v2Containers/Facebook/constants.js

@@ -4,12 +4,36 @@
  *
  */
 
-const prefix = 'app/Facebook';
+const prefix = 'app/v2Containers/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`;
+export const UPLOAD_FB_AD_ASSET_REQUEST = `${prefix}/UPLOAD_ASSET_REQUEST`;
+export const UPLOAD_FB_AD_ASSET_SUCCESS = `${prefix}/UPLOAD_ASSET_SUCCESS`;
+export const UPLOAD_FB_AD_ASSET_FAILURE = `${prefix}/UPLOAD_ASSET_FAILURE`;
+export const CREATE_FACEBOOK_AD_TEMPLATE_REQUEST = `${prefix}/CREATE_FACEBOOK_AD_TEMPLATE_REQUEST`;
+export const CREATE_FACEBOOK_AD_TEMPLATE_SUCCESS = `${prefix}/CREATE_FACEBOOK_AD_TEMPLATE_SUCCESS`;
+export const CREATE_FACEBOOK_AD_TEMPLATE_FAILURE = `${prefix}/CREATE_FACEBOOK_AD_TEMPLATE_FAILURE`;
 
+
+export const GET_FACEBOOK_AD_TEMPLATE_DETAILS_REQUEST = `${prefix}/EDIT/CREATE_FACEBOOK_AD_TEMPLATE_DETAILS_REQUEST`;
+export const GET_FACEBOOK_AD_TEMPLATE_DETAILS_SUCCESS = `${prefix}/EDIT/CREATE_FACEBOOK_AD_TEMPLATE_DETAILS_SUCCESS`;
+export const GET_FACEBOOK_AD_TEMPLATE_DETAILS_FAILURE = `${prefix}/EDIT/CREATE_FACEBOOK_AD_TEMPLATE_DETAILS_FAILURE`;
+
+export const EDIT_FACEBOOK_AD_TEMPLATE_REQUEST = `${prefix}/Edit/EDIT_FACEBOOK_AD_TEMPLATE_REQUEST`;
+export const EDIT_FACEBOOK_AD_TEMPLATE_SUCCESS = `${prefix}/Edit/EDIT_FACEBOOK_AD_TEMPLATE_SUCCESS`;
+export const EDIT_FACEBOOK_AD_TEMPLATE_FAILURE = `${prefix}/Edit/EDIT_FACEBOOK_AD_TEMPLATE_FAILURE`;
+
+export const CLEAR_FACEBOOK_AD_EDIT_RESPONSE_REQUEST = `${prefix}/Edit/CLEAR_EDIT_RESPONSE_REQUEST`;
+export const CLEAR_FACEBOOK_AD_DATA = `${prefix}/Edit/CLEAR_DATA`;
+export const CLEAR_FACEBOOK_AD_CREATE_RESPONSE_REQUEST = `${prefix}/Create/CLEAR_EDIT_RESPONSE_REQUEST`;
+export const CLEAR_FACEBOOK_AD_ASSET = `${prefix}/CLEAR_ASSET`;
+
+
+export const GET_ORG_OU_LIST_REQUEST = `${prefix}/GET_ORG_OU_LIST_REQUEST`;
+export const GET_ORG_OU_LIST_SUCCESS = `${prefix}/GET_ORG_OU_LIST_SUCCESS`;
+export const GET_ORG_OU_LIST_FAILURE = `${prefix}/GET_ORG_OU_LIST_FAILURE`;
 // marketing objectives constants
 
 export const VALUE_APP_INSTALLS = 'VALUE_APP_INSTALLS';

package/v2Containers/Facebook/index.js

@@ -24,7 +24,8 @@ 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 { makeSelectMarketingObjectiveList, makeSelectFbAd, makeSelectTemplate } from './selectors';
+import Advertisement from './Advertisement';
 import {
   VALUE_APP_INSTALLS,
   VALUE_BRAND_AWARENESS,
@@ -149,9 +150,7 @@ const getCategorizedMarketingObjectiveList = (marketingObjectivesList, formatMes
 const Facebook = (props) => {
   const {
     className,
-    templateData: {
-      selectedMarketingObjective: fbMarketingObjectiveValue = VALUE_REACH,
-    } = {},
+    templateData,
     cap: {
       campaignDetails: {
         name: fbCampaignValue,
@@ -179,13 +178,25 @@ const Facebook = (props) => {
     marketingObjectiveList,
     facebookActions,
     intl,
+    isFullMode,
+    fbADData,
+    onCreateComplete,
+    params,
+    facebookTemplateData,
   } = props;
-
+  const {
+    selectedMarketingObjective: fbMarketingObjectiveValue = VALUE_REACH,
+  } = templateData || {};
   const [isDrawerVisible, setDrawerVisibility] = useState(false);
   const [selectedMarketingObjective, setMarketingObjective] = useState(socialObjective || fbMarketingObjectiveValue);
 
   useEffect(() => {
-    facebookActions.getMarketingObjectives();
+    if (!isFullMode) {
+      facebookActions.getMarketingObjectives();
+    } else {
+      const orgId = window.localStorage.getItem('orgID');
+      facebookActions.getOrgOUs(orgId);
+    }
   }, []);
 
   const categorizedMarketingObjectiveList = getCategorizedMarketingObjectiveList(marketingObjectiveList, intl.formatMessage);
@@ -215,141 +226,156 @@ const Facebook = (props) => {
   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>
+   !isFullMode ? (<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}
+         <div className="account-section-container">
+           <CapHeading type="h3">
+             <FormattedMessage {...messages.fbAdCampaignSetDetailsTitle} />
+           </CapHeading>
+           <CapLabel type="label1">
+             <FormattedMessage
+               {...messages.fbAdCampaignSetDetailsDescription}
               />
-            </CapLabel>
-          </div>
+           </CapLabel>
+         </div>
 
-          <CapRow span={12} type="flex">
-            {campaignDataList.map(({ label, value, onChange }, index) => (
-              <StyledCampaignDetailCapColumn
-                span={index % 2 === 0 ? 6 : 14}
-                key={label}
+         <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 facebook-marketing-objective-change"
-                        onClick={onChange}
+               <CapRow>
+                 <CapLabel type="label2">
+                   <FormattedMessage {...messages[label]} />
+                 </CapLabel>
+                 <CapHeading type="h4">
+                   {value}
+                   {!socialRemoteCampaignId && onChange && (
+                   <CapButton
+                     type="flat"
+                     className="marketingObjective-change-button facebook-marketing-objective-change"
+                     onClick={onChange}
                       >
-                        <FormattedMessage {...messages.fbChange} />
-                      </CapButton>
+                     <FormattedMessage {...messages.fbChange} />
+                   </CapButton>
                     )}
-                  </CapHeading>
-                </CapRow>
-              </StyledCampaignDetailCapColumn>
+                 </CapHeading>
+               </CapRow>
+             </StyledCampaignDetailCapColumn>
             ))}
-          </CapRow>
-          <CapDrawer
-            content={
-              <MarketingObjective
-                selectedMarketingObjective={selectedMarketingObjective}
-                onMarketingObjectiveSelect={onMarketingObjectiveSelect}
-                defaultmarketingObjective={socialObjective || fbMarketingObjectiveValue}
-                onSubmit={setDrawerVisibility}
-                marketingObjectiveList={categorizedMarketingObjectiveList}
+         </CapRow>
+         <CapDrawer
+           content={
+             <MarketingObjective
+               selectedMarketingObjective={selectedMarketingObjective}
+               onMarketingObjectiveSelect={onMarketingObjectiveSelect}
+               defaultmarketingObjective={socialObjective || fbMarketingObjectiveValue}
+               onSubmit={setDrawerVisibility}
+               marketingObjectiveList={categorizedMarketingObjectiveList}
               />
             }
-            visible={isDrawerVisible}
-            width={380}
-            onClose={() => setDrawerVisibility(false)}
+           visible={isDrawerVisible}
+           width={380}
+           onClose={() => setDrawerVisibility(false)}
           />
-        </div>
+       </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 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"
+         <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>
+             </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
-        className="facebook-confirm-button"
-        type="primary"
-        onClick={() =>
+               </ul>
+             </CapColumn>
+           </CapRow>
+         </div>
+       </div>
+     </div>
+     <CapButton
+       className="facebook-confirm-button"
+       type="primary"
+       onClick={() =>
           onFacebookSubmit({ channel: "FACEBOOK", selectedMarketingObjective, accountId })
         }
       >
-        <FormattedMessage {...messages.fbConfirm} />
-      </CapButton>
-    </div>
+       <FormattedMessage {...messages.fbConfirm} />
+     </CapButton>
+   </div>) : <div style={{height: '1200px'}}>
+     <Advertisement
+       isFullMode={isFullMode}
+       actions={facebookActions}
+       fbADData={fbADData}
+       onCreateComplete={onCreateComplete}
+       templateData={templateData}
+       params={params}
+       facebookTemplateData={facebookTemplateData}
+     /></div>
   );
 };
 
 Facebook.propTypes = {
-  className: PropTypes.string.isRequired,
+  className: PropTypes.string,
   templateData: PropTypes.object,
   cap: PropTypes.object,
   messageDetails: PropTypes.object,
-  onFacebookSubmit: PropTypes.func.isRequired,
+  onFacebookSubmit: PropTypes.func,
   marketingObjectiveList: PropTypes.arrayOf(PropTypes.string),
-  facebookActions: PropTypes.func.isRequired,
-  intl: intlShape.isRequired,
+  facebookActions: PropTypes.func,
+  intl: intlShape,
+  isFullMode: PropTypes.boolean,
+  fbADData: PropTypes.object,
+  onCreateComplete: PropTypes.func,
 };
 
 Facebook.defaultProps = {
-  marketingObjectiveList: [],
+  marketingObjectiveList: [""],
+
 };
 
 const mapStateToProps = createStructuredSelector({
   marketingObjectiveList: makeSelectMarketingObjectiveList(),
+  fbADData: makeSelectFbAd(),
+  facebookTemplateData: makeSelectTemplate(),
 });
 
 const mapDispatchToProps = (dispatch) => ({