@capillarytech/creatives-library 7.0.4 → 7.0.6

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "7.0.4",
+  "version": "7.0.6",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",

package/v2Components/TemplatePreview/index.js

@@ -131,7 +131,7 @@ 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, viberBrandName, viberAccountName } = this.props;
     const { buttonText, imageURL, messageContent: viberMessageContent } = content || {};
     let smsDetails = {};
     // let smsText = '';
@@ -561,6 +561,7 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
           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 style={{ position: 'absolute', top: '12%', left: '36%'}}>{viberBrandName}</div>
               <div
                 className="msgContainer viber-preview"
                 style={{
@@ -574,15 +575,14 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
                     "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-size': '12px',
                     'font-weight': 900,
                     "color": CAP_WHITE,
                   }}
                 >
-                  {this.props.viberAccountName}
+                  {viberAccountName}
                 </div>
                 <div
                   className="message-pop align-left"

package/v2Containers/CreativesContainer/SlideBoxContent.js

@@ -291,6 +291,8 @@ function SlideBoxContent(props) {
       {isPreview && (
       <TemplatePreview
         content={getChannelPreviewContent(templateData)}
+        viberBrandName={selectedAccount || ""}
+        viberAccountName={(selectedAccount || "")[0]}
         unicodeEnabled={get(templateData, `versions.base['unicode-validity']`)}
         channel={(templateData.type || '').toLowerCase()}
         charCounterEnabled={channel === constants.SMS}

package/v2Containers/Templates/index.js

@@ -171,10 +171,8 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           break;
         case VIBER:
           channel = 'Viber';
-          if (!this.props.isFullMode) {
-            activeMode = ACCOUNT_SELECTION_MODE;
-            this.props.actions.getWeCrmAccounts(channel);
-          }
+          activeMode = ACCOUNT_SELECTION_MODE;
+          this.props.actions.getWeCrmAccounts(channel);
           break;
         case LINE:
           channel = "Line";
@@ -262,10 +260,8 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         }
       } else if (nextProps.route.name.toLowerCase() === VIBER_CHANNEL) {
         channel = 'Viber';
-        if (!this.props.isFullMode) {
-          this.setState({defaultAccount: true});
-          nextProps.actions.getWeCrmAccounts(channel);
-        }
+        this.setState({defaultAccount: true});
+        nextProps.actions.getWeCrmAccounts(channel);
       }
 
       this.setState({ channel }, () => {
@@ -296,10 +292,12 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         return;
       }
       selectedAccount = nextProps.Templates.weCrmAccounts[0];
-      this.setState({selectedAccount: selectedAccount.name}, () => {
-        params.wecrmId = selectedAccount.configs.wecrm_app_id;
-        params.wecrmToken = selectedAccount.configs.wecrm_token;
-        params.originalId = selectedAccount.sourceAccountIdentifier;
+      const { configs = {}, name = "" } = selectedAccount;
+      const { wecrm_app_id = "", wecrm_token = "", sourceAccountIdentifier = "" } = configs;
+      this.setState({selectedAccount: name}, () => {
+        params.wecrmId = wecrm_app_id;
+        params.wecrmToken = wecrm_token;
+        params.originalId = sourceAccountIdentifier;
         this.props.actions.setViberAccount(nextProps.Templates.weCrmAccounts[0]);
         this.getAllTemplates({params});
       });
@@ -1842,7 +1840,8 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
   render() {
     const isFullMode = this.isFullMode();
     const { activeMode, channel, wechatFilter, lineFilter } = this.state;
-    const showForViber = (channel.toLowerCase() !== VIBER_CHANNEL || (channel.toLowerCase() === VIBER_CHANNEL && isEmpty(get(this.props, 'Templates.selectedViberAccount', {}))));
+    const showForViber = (channel.toLowerCase() !== VIBER_CHANNEL ||
+      (channel.toLowerCase() === VIBER_CHANNEL && !this.props.isFullMode && isEmpty(get(this.props, 'Templates.selectedViberAccount', {}))));
     if (activeMode === ACCOUNT_SELECTION_MODE && showForViber ) {
       return this.renderAccountSelection();
     }

package/v2Containers/Viber/index.js

@@ -68,6 +68,7 @@ const Viber = (props) => {
     actions,
     viber = {},
     getFormSubscriptionData,
+    viberData = {},
   } = props || {};
 
   const { formatMessage } = intl;
@@ -85,6 +86,7 @@ const Viber = (props) => {
   const [messageTitle, updateTextMessageTitle] = useState('');
   const [errorMessageTitle, updateErrorMessageTitle] = useState(false);
   const [buttonURLErrorMessage, updateButtonURLErrorMessage] = useState(false);
+  const [accountName, updateAccountName] = useState("");
 
   const StyledHeader = styled(CapHeader)`
   margin-bottom: 14px;
@@ -115,7 +117,12 @@ const Viber = (props) => {
   }, [paramObj.id]);
 
   useEffect(() => {
-    if (params && params.id || templateData.edit) {
+    const { name = '' } = viberData.selectedViberAccount || {};
+    updateAccountName(name);
+  }, [viberData.selectedViberAccount]);
+
+  useEffect(() => {
+    if ((params && params.id) || templateData.edit) {
       const { viber: editViberContent = {} } = get(templateData, `versions.base.content`) || get(viber, `templateDetails.versions.base.content`) || {};
       const editMessageTitle = (templateData || {}).name || get(viber, 'templateDetails.name');
       updateTextMessageTitle(editMessageTitle);
@@ -496,7 +503,8 @@ const Viber = (props) => {
        <TemplatePreview
          channel="VIBER"
          content={{imageURL: imagePreview, buttonText, messageContent}}
-         viberAccountName={"MUJI"}
+         viberAccountName={((accountName[0] || "")).toUpperCase()}
+         viberBrandName={accountName}
         />
     );
 
@@ -635,7 +643,6 @@ const Viber = (props) => {
           <CapColumn span={14}>
             <StyledHeader
               title={formatMessage(messages.viberCreativeTitle)}
-              description={formatMessage(messages.viberCreativeDesc)}
               size="regular"
             />
             {

package/v2Containers/Viber/messages.js

@@ -14,10 +14,6 @@ export default defineMessages({
     id: `${scope}.viberCreativeTitle`,
     defaultMessage: "Viber creative",
   },
-  viberCreativeDesc: {
-    id: `${scope}.viberCreativeDesc`,
-    defaultMessage: "Select any of the existing templates or create new",
-  },
   message: {
     id: `${scope}.message`,
     defaultMessage: 'Message',