@capillarytech/creatives-library 7.0.0 → 7.0.4

package/v2Containers/TemplatesV2/index.js

@@ -22,6 +22,7 @@ import * as actions from './actions';
 import Templates from '../Templates';
 import CallTask from '../CallTask';
 import Facebook from '../Facebook';
+import Viber from '../Viber';
 import Line from '../Line/Container';
 import Gallery from '../Assets/Gallery';
 import withStyles from '../../hoc/withStyles';
@@ -52,6 +53,8 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
       //'wechat': {content: this.getTemplatesComponent('wechat'), tab: 'Wechat', key: 'wechat'},
       mPush: {content: <></>, tab: intl.formatMessage(messages.pushNotification), key: 'mobilepush'},
       line: {content: <></>, tab: intl.formatMessage(messages.line), key: 'line'},
+      viber: {content: <></>, tab: intl.formatMessage(messages.viber), key: 'viber'},
+
 
     };
     let filteredPanes = Object.keys(defaultPanes)
@@ -152,7 +155,12 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
       />
     );
   }
-
+  getViberComponent =() => (
+    <Viber
+      {...this.props}
+      isCreateFlow
+    ></Viber>
+  )
   getLineComponent = () => (
     <Line
       {...this.props}

package/v2Containers/TemplatesV2/messages.js

@@ -46,6 +46,10 @@ export default defineMessages({
     id: 'creatives.containersV2.TemplatesV2.facebook',
     defaultMessage: 'Facebook',
   },
+  viber: {
+    id: 'creatives.containersV2.TemplatesV2.viber',
+    defaultMessage: 'Viber',
+  },
   gallery: {
     id: 'creatives.containersV2.TemplatesV2.gallery',
     defaultMessage: 'Gallery',

package/v2Containers/Viber/index.js

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
 import { bindActionCreators } from 'redux';
 import { createStructuredSelector } from 'reselect';
 import { injectIntl, FormattedMessage } from 'react-intl';
-// import { connect } from 'react-redux';
+import { isUrl } from '../Line/Container/Wrapper/utils';
 import { get } from 'lodash';
 import withCreatives from '../../hoc/withCreatives';
 import {
@@ -84,6 +84,7 @@ const Viber = (props) => {
   const [isEditFlow, checkEditFlow] = useState(false);
   const [messageTitle, updateTextMessageTitle] = useState('');
   const [errorMessageTitle, updateErrorMessageTitle] = useState(false);
+  const [buttonURLErrorMessage, updateButtonURLErrorMessage] = useState(false);
 
   const StyledHeader = styled(CapHeader)`
   margin-bottom: 14px;
@@ -130,7 +131,7 @@ const Viber = (props) => {
   }, [viber[`templateDetails`] || templateData]);
 
 // Common container for TEXT, IMAGE and Button
-  const container = (icon, message, data) => (<CapRow
+  const container = (icon, message, data, showOptional) => (<CapRow
     style={{
       border: `solid 1px ${CAP_G07}`,
       marginBottom: '20px',
@@ -138,7 +139,8 @@ const Viber = (props) => {
     <CapRow style={{ padding: `${CAP_SPACE_12} ${CAP_SPACE_24} 0px` }}>
       <CapIcon type={icon}/>
       <CapHeading type="h4" style={{position: 'absolute', display: 'inline-block', top: '13px', paddingLeft: '10px'}}>
-        {message}
+        {message} {" "}
+        {showOptional && <CapLabel.CapLabelInline type="label14">{formatMessage(messages.optional)}</CapLabel.CapLabelInline>}
       </CapHeading>
     </CapRow>
     <CapDivider className="cap-divider-margin"/>
@@ -481,7 +483,12 @@ const Viber = (props) => {
   };
 
   const onChangeButtonUrl = ({ target: { value } }) => {
+    let errorMessage = false;
     updateButtonUrl(value);
+    if (!isUrl(value)) {
+      errorMessage = formatMessage(messages.inValidUrliErrorMessage);
+    }
+    updateButtonURLErrorMessage(errorMessage);
   };
   const getPreviewSection = () =>
     // const accountName = get(lineData, 'selectedLineAccount.name', '');
@@ -509,6 +516,7 @@ const Viber = (props) => {
       defaultValue={buttonURL}
       value={buttonURL}
       label={formatMessage(messages.buttonUrl)}
+      errorMessage={buttonURLErrorMessage}
       />
   </>);
 
@@ -613,6 +621,10 @@ const Viber = (props) => {
     if (( trimedButtonText === '' && trimedButtonUrl !== '') || ( trimedButtonUrl !== '' && trimedButtonUrl === '')) {
       return true;
     }
+    // if button url is not valid url
+    if (buttonURLErrorMessage) {
+      return true;
+    }
     return false;
   };
 
@@ -644,9 +656,9 @@ const Viber = (props) => {
               )
               : null
             }
-            {container("message", <FormattedMessage {...messages.message} />, TextAreaViber)}
-            {container("image", <FormattedMessage {...messages.image} />, ImageViber)}
-            {container("button", <FormattedMessage {...messages.button} />, ButtonViber)}
+            {container("message", <FormattedMessage {...messages.message} />, TextAreaViber, false)}
+            {container("image", <FormattedMessage {...messages.image} />, ImageViber, true)}
+            {container("button", <FormattedMessage {...messages.button} />, ButtonViber, true)}
             <div style={{marginBottom: '100px'}}/>
           </CapColumn>
           <CapColumn span={6}>

package/v2Containers/Viber/messages.js

@@ -134,4 +134,12 @@ export default defineMessages({
     id: `${scope}.emptyTitleErrorMessage`,
     defaultMessage: 'Template title can not be empty',
   },
+  optional: {
+    id: `${scope}.optional`,
+    defaultMessage: '(optional)',
+  },
+  inValidUrliErrorMessage: {
+    id: `${scope}.inValidUrliErrorMessage`,
+    defaultMessage: 'Button URL is not valid',
+  },
 });