@capillarytech/creatives-library 6.13.6 → 6.13.8

package/app.js

@@ -39,12 +39,12 @@ const history = syncHistoryWithStore(browserHistory, store, {
 });
 
 const bugSnagErrorCallback = (event) => {
-  const { app: { releaseStage } = {}, error } = event || {};
-  const errorMessage = error && error.message;
+  const { app: { releaseStage } = {}, originalError } = event || {};
+  const errorMessage = originalError && originalError.message;
   if (
     (releaseStage || '').includes('nightly') ||
     process.env.NODE_ENV !== 'production' ||
-    ignoredErrorMessages.include[errorMessage]
+    ignoredErrorMessages.includes(errorMessage)
   ) {
     return false;
   }

package/containers/Templates/index.js

@@ -721,9 +721,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       }
     }
     switch (type) {
-      case "getFormData":
-        this.getFormData(e);
-        break;
       case "startTemplateCreation":
         console.log('Starting to create template');
         //this.getFormData(e);

package/index.js

@@ -65,6 +65,10 @@ import LineCreate from './v2Containers/Line/Container';
 import lineCreateReducer from './v2Containers/Line/Container/reducer';
 import lineCreateSaga from './v2Containers/Line/Container/sagas';
 
+import Viber from './v2Containers/Viber';
+import viberReducer from './v2Containers/Viber/reducer';
+import viberSaga from './v2Containers/Viber/sagas';
+
 import TemplatesV2 from './v2Containers/TemplatesV2/index';
 
 import CreativesContainer from './v2Containers/CreativesContainer';
@@ -82,7 +86,7 @@ const TemplatesContainer = {Templates, templateReducer, templateSaga};
 const SmsCreateContainer = {SmsCreate, smsCreateReducer, smsCreateSaga};
 const SmsEditContainer = {SmsEdit, smsEditReducer, smsEditSaga};
 const EmailContainer = {Email, emailReducer, emailSaga};
-const BeeContainer ={ BeeEditor,beeReducer,beeSaga}
+const BeeContainer = { BeeEditor, beeReducer, beeSaga};
 const CallTaskContainer = {CallTask, callTaskReducer, callTaskSaga};
 const WeChatMapTemplateContainer = {WeChatMapTemplate, weChatMapTemplateReducer, weChatMapTemplateSaga};
 const WeChatRichMediaCreateContainer = {WeChatRichMediaCreate, weChatRichMediaCreateReducer, weChatRichMediaCreateSaga};
@@ -92,6 +96,8 @@ const MobilePushEditContainer = {MobilepushEdit, mobilepushEditReducer, mobilepu
 const LineCreateContainer = {LineCreate, lineCreateReducer, lineCreateSaga};
 const TemplatesV2Container = {TemplatesV2, templateReducer, templateSaga};
 const FacebookContainer = {Facebook, facebookReducer, facebookSaga};
+const ViberContainer = {Viber, viberReducer, viberSaga};
+
 const GalleryContainer = {Gallery, galleryReducer, gallerySagas};
 
 export {default as TagList} from './v2Containers/TagList/index';
@@ -131,4 +137,5 @@ export { CapContainer,
   updateCharCount,
   FacebookContainer,
   GalleryContainer,
+  ViberContainer,
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "6.13.6",
+  "version": "6.13.8",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",
@@ -15,7 +15,7 @@
     "@babel/polyfill": "7.4.3",
     "@bugsnag/js": "^7.2.1",
     "@bugsnag/plugin-react": "^7.2.1",
-    "@capillarytech/cap-ui-utils": "1.3.3",
+    "@capillarytech/cap-ui-utils": "1.3.4",
     "@mailupinc/bee-plugin": "^1.2.0",
     "babel-cli": "^6.26.0",
     "chalk": "1.1.3",

package/reducers.js

@@ -9,6 +9,8 @@ import { LOCATION_CHANGE } from 'react-router-redux';
 
 import languageProviderReducer from 'v2Containers/LanguageProvider/reducer';
 import beeEditorReducer from 'v2Containers/BeeEditor/reducer';
+
+
 import capReducer from 'containers/Cap/reducer';
 import appReducer from 'containers/App/reducer';
 import createSmsReducer from 'containers/Sms/Create/reducer';

package/routes.js

@@ -598,7 +598,8 @@ export default function createRoutes(store) {
 
         importModules.catch(errorLoading);
       },
-    }, {
+    },
+    {
       path: '/v2(/:channel)',
       name: 'templatesV2',
       getComponent(nextState, cb) {
@@ -634,6 +635,8 @@ export default function createRoutes(store) {
           import('v2Containers/Facebook/reducer'),
           import('v2Containers/Line/Container/sagas'),
           import('v2Containers/Line/Container/reducer'),
+          import('v2Containers/Viber/sagas'),
+          import('v2Containers/Viber/reducer'),
         ]);
 
         const renderRoute = loadModule(cb);
@@ -654,6 +657,7 @@ export default function createRoutes(store) {
           galleryReducer, gallerySagas,
           facebookSagas, facebookReducer,
           lineCreateSagas, lineCreateReducer,
+          viberSagas, viberReducer,
         ]) => {
           injectReducer('templates', reducer.default);
           injectReducer('cap', capReducer.default);
@@ -670,6 +674,7 @@ export default function createRoutes(store) {
           injectReducer('gallery', galleryReducer.default);
           injectReducer('facebook', facebookReducer.default);
           injectReducer('lineCreate', lineCreateReducer.default);
+          injectReducer('viber', viberReducer.default);
           injectSagas(gallerySagas.default);
           injectSagas(sagas.default);
           injectSagas(capSagas.default);
@@ -685,6 +690,7 @@ export default function createRoutes(store) {
           injectSagas(weChatRichmediaTemplatesEditSagas.default);
           injectSagas(facebookSagas.default);
           injectSagas(lineCreateSagas.default);
+          injectSagas(viberSagas.default);
           renderRoute(component);
         });
         importModules.catch(errorLoading);

package/services/api.js

@@ -358,6 +358,11 @@ export const createLineTemplate = ({template}) => {
   return request(url, getAPICallObject('POST', template));
 };
 
+export const createViberTemplate = ({template}) => {
+  const url = `${API_ENDPOINT}/templates/VIBER`;
+  return request(url, getAPICallObject('POST', template));
+};
+
 export const getLocizMessage = async (locale) => {
   const appName = 'creatives_v2';
   const url = `${ARYA_ENDPOINT}/translations/${appName}/${locale}`;

package/v2Components/TemplatePreview/_templatePreview.scss

@@ -21,8 +21,6 @@
     left: 23%;
     width: 42%;
     height: 336px;
-    display: -webkit-box;
-    display: -ms-flexbox;
     display: flex;
 
     .sms-icon{
@@ -51,6 +49,14 @@
         left: 36px;
         margin-top: -6px;
       }
+      }
+      &.viber-preview{
+        width: 43%;
+        .message-pop {
+          width: 80%;
+          left: 36px;
+          margin-top: -6px;
+        }
     }
 
     .message-pop{

package/v2Components/TemplatePreview/index.js

@@ -16,15 +16,19 @@ import {updateCharCount} from '../../utils/smsCharCountV2';
 import messages from './messages';
 import { WECHAT } from '../../v2Containers/CreativesContainer/constants';
 import Carousel from '../Carousel';
+import { VIBER } from '../../v2Containers/App/constants';
 const wechatBodyNew = require('./assets/images/wechat_mobile_android.svg');
 const smsMobileAndroid = require('./assets/images/sms_mobile_android.svg');
 const lineMobileAndroid = require('../../assets/line.png');
+const viberMobileAndroid = require('../../assets/viber.png');
+
 const lineImgPlaceholder = require('../../assets/line-image-placeholder.svg');
 const lineStickerPlaceholder = require('../../assets/smiley-placeholder.svg');
 const lineVideoPlaceholder = require('../../assets/rich-video-placeholder.svg');
 const androidPushMessagePhone = require('./assets/images/androidPushMessage.svg');
 const iPhonePushMessagePhone = require('./assets/images/iPhonePushMessage.svg');
-import { CAP_COLOR_03, CAP_WHITE, FONT_COLOR_01, CAP_G08, CAP_G06 } from '@capillarytech/cap-ui-library/styled/variables';
+
+import { CAP_COLOR_03, CAP_WHITE, FONT_COLOR_01, CAP_G08, CAP_G06, CAP_G15, CAP_PURPLE01, CAP_G16 } from '@capillarytech/cap-ui-library/styled/variables';
 import { TEMPLATE, IMAGE_CAROUSEL, IMAGE, STICKER, TEXT, IMAGE_MAP, VIDEO } from '../../v2Containers/Line/Container/constants';
 
 class TemplatePreview extends React.Component { // eslint-disable-line react/prefer-stateless-function
@@ -127,7 +131,8 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
 
   render() {
     let content = channel && channel.toLowerCase() === 'sms' ? [this.props.content] : this.props.content;
-    const { channel, showTestAndPreviewIcon, module} = this.props;
+    const { channel, showTestAndPreviewIcon, module } = this.props;
+    const { buttonText, imageURL, messageContent: viberMessageContent } = content || {};
     let smsDetails = {};
     // let smsText = '';
     if (this.props.content && this.props.charCounterEnabled) {
@@ -155,11 +160,11 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
       });
     }
     const disablePreviewAndTest = this.props.channel === 'MOBILEPUSH' ? !this.props.content.header : (this.props.channel === 'SMS' ? !this.props.content : false);
-    const showTestAndPreview = showTestAndPreviewIcon && 
+    const showTestAndPreview = showTestAndPreviewIcon &&
         channel !== WECHAT &&
         ['outbound', 'library'].includes(module);
 
-    const renderLineMultiText = (content)  => {
+    const renderLineMultiText = (content) => {
       let textCount = 0;
       return content.map((item) => {
         const { type, messageContent = '' } = item || {};
@@ -170,12 +175,17 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
               {this.props.intl.formatMessage(messages.textMessageLabel)}
               {textCount}: ({messageContent.length}/{1600} {this.props.intl.formatMessage(messages.textMessageCharacter)})
             </p>
-          )
+          );
         }
-        return null
+        return null;
       });
-    }
-    
+    };
+    const viberSectionStyle = {
+      "padding": '3.5px 0 0',
+      'border-radius': '8px',
+      'background-color': CAP_G15,
+      'width': '79%',
+    };
     const getVideoContent = ({
       video,
       actionUrl,
@@ -245,7 +255,7 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
             />
           )
         }
-      </div>  
+      </div>
     );
 
     return (
@@ -393,7 +403,8 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
                   marginLeft: 40,
                 }}
               >
-                <div className="sms-icon"
+                <div
+                  className="sms-icon"
                   style={{
                     left: 0,
                     top: 8,
@@ -401,7 +412,7 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
                     width: 20,
                     height: 20,
                     background: CAP_COLOR_03,
-                    paddingRight: 5
+                    paddingRight: 5,
                   }}
                 >
                   {this.props.LineAccountName}
@@ -464,7 +475,7 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
                                 },
                               }}
                             />
-                          </div>  
+                          </div>
                         );
                       }
                       if (type === VIDEO) {
@@ -495,7 +506,7 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
                                 },
                               }}
                             />
-                          </div>  
+                          </div>
                         );
                       }
                       if (type === STICKER && selectedSticker) {
@@ -510,7 +521,7 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
                               alignItems: 'center',
                             }}
                           >
-                            <CapImage 
+                            <CapImage
                               src={selectedSticker.stickerUrl}
                               style={{maxWidth: '100%', marginBottom: 5 }}
                               rest={{
@@ -519,11 +530,11 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
                                   marginBottom: 5,
                                 },
                                 height: 70,
-                                onMouseOut: e => (e.currentTarget.src = selectedSticker.stickerUrl),
-                                onMouseOver: e => (e.currentTarget.src = selectedSticker.animatedStickerUrl ||  selectedSticker.stickerUrl),
+                                onMouseOut: (e) => (e.currentTarget.src = selectedSticker.stickerUrl),
+                                onMouseOver: (e) => (e.currentTarget.src = selectedSticker.animatedStickerUrl || selectedSticker.stickerUrl),
                               }}
                             />
-                          </div>  
+                          </div>
                         );
                       }
                       if ((type === IMAGE_CAROUSEL || type === TEMPLATE) && imageCarousel) {
@@ -535,7 +546,7 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
                           >
                             <Carousel imageCarousel={imageCarousel}/>
                           </div>
-                        )
+                        );
                       }
                       return null;
                     })
@@ -546,7 +557,82 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
             </div>
           ) : ''
         }
+            {
+          channel && channel.toLowerCase() === VIBER ? (
+            <div className="shell-v2 align-center" id="sms-preview">
+              <CapImage className="preview-image" src={viberMobileAndroid} alt={this.props.intl.formatMessage(messages.previewGenerated)}/>
+              <div
+                className="msgContainer viber-preview"
+                style={{
+                  maxHeight: 292,
+                  marginLeft: 28,
+                }}
+              >
+                <div
+                  className="sms-icon"
+                  style={{
+                    "width": 20,
+                    "height": 20,
+                    "margin": '0 4px 277px 0',
+                    "padding": '6px 2px 7px 3px',
+                    'border-radius': '4px',
+                    'background-color': CAP_PURPLE01,
+                    'font-size': '6px',
+                    'font-weight': 900,
+                    "color": CAP_WHITE,
+                  }}
+                >
+                  {this.props.viberAccountName}
+                </div>
+                <div
+                  className="message-pop align-left"
+                  style={viberSectionStyle}>
+                  {/* Text Viber preview */}
+                  <p
+                    style={{
+                      'font-size': '10px',
+                      "color": CAP_G16,
+                      "margin": '1.5px 6px 1px 7px',
+                    }}>{viberMessageContent || ''}
+                  </p>
+                  {/* Image Viber preview */}
+                  {imageURL && <CapImage
+                    src={imageURL}
+                    alt="brand-name"
+                    rest={{
+                      style: {
+                        maxWidth: '100%',
+                        marginBottom: 5,
+                      },
+                    }}
+                    />
+                  }
+                  {/* button viber preview */}
+                  {buttonText && <div
+                    style={{
+                      'border-radius': '16px',
+                      'background-color': CAP_PURPLE01,
+                      "margin-top": '14px',
+                      'text-align': 'center',
+                      "width": '132px',
+                      "height": '20px',
+                      "margin-left": "5px",
+                    }}>
+                    <p
+                      style={{ 'font-size': '12px',
+                        'font-weight': '500',
+                        "color": CAP_WHITE }}
+                      >
+                      {buttonText || ''}</p>
+                  </div>
+                  }
+                  <div style={{ paddingBottom: 32}}></div>
+                </div>
 
+              </div>
+            </div>
+          ) : ''
+        }
           </div>
 
         </CapColumn>

package/v2Containers/App/constants.js

@@ -20,7 +20,7 @@ export const TRACK_CREATE_WECHAT = 'createWeChat';
 export const TRACK_CREATE_IMAGE = 'createImage';
 export const TRACK_CREATE_LINE = 'createLine';
 
-
+export const VIBER = 'viber';
 export const TRACK_EDIT_SMS = 'editSms';
 export const TRACK_EDIT_EMAIL = 'editEmail';
 export const TRACK_EDIT_MPUSH = 'editMpush';

package/v2Containers/CreativesContainer/SlideBoxContent.js

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import get from 'lodash/get';
+import cloneDeep from 'lodash/cloneDeep';
 import TemplatesV2 from '../TemplatesV2';
 import TemplatePreview from '../../v2Components/TemplatePreview';
 import SmsCreate from '../Sms/Create';
@@ -18,6 +19,7 @@ import CallTask from '../CallTask';
 import MobliPushEdit from '../MobilePush/Edit';
 import * as constants from './constants';
 import LineContainer from '../Line/Container';
+import Viber from '../Viber';
 const CreativesWrapper = styled.div`
   .ant-popover,
   .ant-notification,
@@ -32,7 +34,6 @@ function getWechatTemplateType(mode, templateData, weChatTemplateType = '') {
   }
   return weChatTemplateType;
 }
-
 const getLineType = ({
   slidBoxContent,
   channel,
@@ -70,6 +71,22 @@ const getLineType = ({
   }
   return {};
 };
+const getViber = ({
+  slidBoxContent,
+  channel,
+  isFullMode,
+  templateData,
+}) => {
+  if ((channel === constants.VIBER || (slidBoxContent === 'editTemplate' && templateData && templateData.type === constants.VIBER)) && slidBoxContent !== 'templates') {
+    const isCreate = slidBoxContent === 'createTemplate';
+    const isEdit = slidBoxContent === 'editTemplate';
+    return {
+      isCreate,
+      isEdit,
+    };
+  }
+  return {};
+};
 
 function SlideBoxContent(props) {
   const {
@@ -135,6 +152,15 @@ function SlideBoxContent(props) {
     isFullMode,
     templateData,
   });
+  const {isCreate: isCreateViber = false,
+    isEdit: isEditViber = false } = getViber({
+      slidBoxContent,
+      channel,
+      isFullMode,
+      templateData,
+    });
+
+
   const isCreateSms = slidBoxContent === 'createTemplate' && channel === constants.SMS;
   const isCreateMPush = slidBoxContent === 'createTemplate' && channel === constants.MOBILE_PUSH;
   const isCreateCallTask = slidBoxContent === 'createTemplate' && channel === constants.CALL_TASK;
@@ -156,7 +182,7 @@ function SlideBoxContent(props) {
     isEditEmailWithId = slidBoxContent === 'editTemplate' && channel === constants.EMAIL && templateData._id;
     isEmailEditWithContent = slidBoxContent === 'editTemplate' && channel === constants.EMAIL && !templateData._id;
     isEditFacebook = slidBoxContent === 'editTemplate' && channel === constants.FACEBOOK;
-    isPreview = slidBoxContent === 'preview' && (channel === constants.SMS || channel === constants.LINE);
+    isPreview = slidBoxContent === 'preview' && (channel === constants.SMS || channel === constants.LINE || channel === constants.VIBER);
     isEmailPreview = slidBoxContent === 'preview' && channel === constants.EMAIL;
     isMpushPreview = slidBoxContent === 'preview' && channel === constants.MOBILE_PUSH;
   }
@@ -223,6 +249,16 @@ function SlideBoxContent(props) {
           return previewContent;
         });
       }
+      case constants.VIBER: {
+        const template = cloneDeep(templateDataObject);
+        const { text = "", imageURL = "", buttonText = "" } = get(template, 'versions.base.content.viber', {});
+        template.content = {
+          messageContent: text,
+          imageURL,
+          buttonText,
+        };
+        return template.content;
+      }
       default:
         return get(templateDataObject, `versions.base.content`);
     }
@@ -500,6 +536,33 @@ function SlideBoxContent(props) {
           />
         )
       }
+      {isCreateViber && (
+        <Viber
+          location={creativesLocationProps}
+          onCreateComplete={onCreateComplete}
+          isFullMode={isFullMode}
+          handleClose={handleClose}
+          isGetFormData={isGetFormData}
+          getFormSubscriptionData={getFormData}
+          onShowTemplates={onShowTemplates}
+          templateData={templateData}
+          createNew/>
+      )}
+
+      {isEditViber && <Viber
+        location={creativesLocationProps}
+        params={{
+          id: templateData._id,
+        }}
+        onCreateComplete={onCreateComplete}
+        isFullMode={isFullMode}
+        handleClose={handleClose}
+        isGetFormData={isGetFormData}
+        getFormSubscriptionData={getFormData}
+        onShowTemplates={onShowTemplates}
+        templateData={templateData}
+        createNew/> }
+
     </CreativesWrapper>
   );
 }

package/v2Containers/CreativesContainer/constants.js

@@ -13,5 +13,7 @@ export const CALL_TASK = "CALL_TASK";
 export const MOBILE_PUSH = "MOBILEPUSH";
 export const WECHAT = "WECHAT";
 export const FACEBOOK = "FACEBOOK";
+export const VIBER = "VIBER";
+
 export const SHOW_CONTANER_LOADER = "app/CreativesContainer/SHOW_CONTANER_LOADER";
 export const HIDE_CONTAINER_LOADER = "app/CreativesContainer/HIDE_CONTAINER_LOADER";

package/v2Containers/CreativesContainer/index.js

@@ -247,6 +247,24 @@ class Creatives extends React.Component {
           };
           break;
         }
+        case constants.VIBER: {
+          const { messageBody, isDefault } = templateData;
+          const viberContent = JSON.parse(messageBody || '{}').messages || [{}];
+          creativesTemplateData = {
+            type: constants.VIBER,
+            isDefault,
+            edit: true,
+            name: "",
+            versions: {
+              base: {
+                content: {
+                  viber: viberContent,
+                },
+              },
+            },
+          };
+          break;
+        }
         default:
           break;
       }
@@ -332,6 +350,15 @@ class Creatives extends React.Component {
           };
         }
         break;
+      case constants.VIBER:
+        if (template.value) {
+          const { versions } = template.value;
+          templateData = {
+            channel,
+            messageBody: JSON.stringify(versions.base.content),
+          };
+        }
+        break;
       default:
         break;
     }
@@ -446,8 +473,8 @@ class Creatives extends React.Component {
       }
     }
 
-    const isLineChannel = templateData && templateData.type === constants.LINE;
-    if (channel === constants.LINE || isLineChannel) {
+    const isLineViberChannel = templateData && [constants.LINE, constants.VIBER].includes(templateData);
+    if ([constants.LINE, constants.VIBER].includes(channel) || isLineViberChannel) {
       showFooter = false;
     }
 

package/v2Containers/Templates/_templates.scss

@@ -46,6 +46,63 @@
         }
       }
     }
+    .VIBER {
+      &.cap-custom-card{
+        height: 241px;
+        .ant-card-body {
+         padding:0px 24px 0px;
+          .button-content {    
+            .ant-card-meta-description {
+                min-width: 108px;
+                max-width: 160px;
+                height: 24px;
+                padding: 1px 23px 2px 22px;
+                border-radius: 16px;
+                font-size: 14px;
+                font-weight: 500;
+                background-color:$CAP_PURPLE01;
+                color:$CAP_WHITE;
+                text-align:center;
+            }
+          }
+          .truncate-text-viber{
+            .ant-card-meta-description{
+              display: -webkit-box;
+              -webkit-line-clamp: 9;
+              -webkit-box-orient: vertical; 
+            }
+          }
+          .truncate-text-with-button{
+            .ant-card-meta-description{
+            -webkit-line-clamp: 8;
+            }
+          }
+          .truncate-text-with-image{
+            .ant-card-meta-description{
+            -webkit-line-clamp: 2;
+            }
+          }
+        
+        }
+      
+        &.no-image .ant-card-meta {    
+          .ant-card-meta-description {
+            word-wrap: break-word;
+          }
+        }
+    
+  
+        &.carousel-img-section {
+          .ant-card-body {
+            padding: $CAP_SPACE_24 0;
+          }
+          .ant-card-meta {
+            padding: 0;
+          }
+        }
+    }
+
+    }
   }
 }