@capillarytech/creatives-library 6.7.1 → 6.8.0

package/styles/vendor/semantic/src/definitions/modules/accordion.less

@@ -1,219 +1,219 @@
-/*!
- * # Semantic UI - Accordion
- * http://github.com/semantic-org/semantic-ui/
- *
- *
- * Released under the MIT license
- * http://opensource.org/licenses/MIT
- *
- */
-
-/*******************************
-            Theme
-*******************************/
-
-@type    : 'module';
-@element : 'accordion';
-
-@import (multiple) '../../theme.config';
-
-/*******************************
-            Accordion
-*******************************/
-
-.ui.accordion,
-.ui.accordion .accordion {
-  max-width: 100%;
-}
-.ui.accordion .accordion {
-  margin: @childAccordionMargin;
-  padding: @childAccordionPadding;
-}
-
-/* Title */
-.ui.accordion .title,
-.ui.accordion .accordion .title {
-  cursor: pointer;
-}
-
-/* Default Styling */
-.ui.accordion .title:not(.ui) {
-  padding: @titlePadding;
-  font-family: @titleFont;
-  font-size: @titleFontSize;
-  color: @titleColor;
-}
-
-/* Content */
-.ui.accordion .title ~ .content,
-.ui.accordion .accordion .title ~ .content {
-  display: none;
-}
-
-/* Default Styling */
-.ui.accordion:not(.styled) .title ~ .content:not(.ui),
-.ui.accordion:not(.styled) .accordion .title ~ .content:not(.ui) {
-  margin: @contentMargin;
-  padding: @contentPadding;
-}
-.ui.accordion:not(.styled) .title ~ .content:not(.ui):last-child {
-  padding-bottom: 0em;
-}
-
-/* Arrow */
-.ui.accordion .title .dropdown.icon,
-.ui.accordion .accordion .title .dropdown.icon {
-  display: @iconDisplay;
-  float: @iconFloat;
-  opacity: @iconOpacity;
-  width: @iconWidth;
-  height: @iconHeight;
-  margin: @iconMargin;
-  padding: @iconPadding;
-  font-size: @iconFontSize;
-  transition: @iconTransition;
-  vertical-align: @iconVerticalAlign;
-  transform: @iconTransform;
-}
-
-/*--------------
-    Coupling
----------------*/
-
-/* Menu */
-.ui.accordion.menu .item .title {
-  display: block;
-  padding: @menuTitlePadding;
-}
-.ui.accordion.menu .item .title > .dropdown.icon {
-  float: @menuIconFloat;
-  margin: @menuIconMargin;
-  transform: @menuIconTransform;
-}
-
-/* Header */
-.ui.accordion .ui.header .dropdown.icon {
-  font-size: @iconFontSize;
-  margin: @iconMargin;
-}
-
-/*******************************
-            States
-*******************************/
-
-.ui.accordion .active.title .dropdown.icon,
-.ui.accordion .accordion .active.title .dropdown.icon {
-  transform: @activeIconTransform;
-}
-
-.ui.accordion.menu .item .active.title > .dropdown.icon {
-  transform: @activeIconTransform;
-}
-
-/*******************************
-            Types
-*******************************/
-
-/*--------------
-     Styled
----------------*/
-
-.ui.styled.accordion {
-  width: @styledWidth;
-}
-
-.ui.styled.accordion,
-.ui.styled.accordion .accordion {
-  border-radius: @styledBorderRadius;
-  background: @styledBackground;
-  box-shadow: @styledBoxShadow;
-}
-.ui.styled.accordion .title,
-.ui.styled.accordion .accordion .title {
-  margin: @styledTitleMargin;
-  padding: @styledTitlePadding;
-  color: @styledTitleColor;
-  font-weight: @styledTitleFontWeight;
-  border-top: @styledTitleBorder;
-  transition: @styledTitleTransition;
-}
-.ui.styled.accordion > .title:first-child,
-.ui.styled.accordion .accordion .title:first-child {
-  border-top: none;
-}
-
-
-/* Content */
-.ui.styled.accordion .content,
-.ui.styled.accordion .accordion .content {
-  margin: @styledContentMargin;
-  padding: @styledContentPadding;
-}
-.ui.styled.accordion .accordion .content {
-  padding: @styledChildContentMargin;
-  padding: @styledChildContentPadding;
-}
-
-
-/* Hover */
-.ui.styled.accordion .title:hover,
-.ui.styled.accordion .active.title,
-.ui.styled.accordion .accordion .title:hover,
-.ui.styled.accordion .accordion .active.title {
-  background: @styledTitleHoverBackground;
-  color: @styledTitleHoverColor;
-}
-.ui.styled.accordion .accordion .title:hover,
-.ui.styled.accordion .accordion .active.title {
-  background: @styledHoverChildTitleBackground;
-  color: @styledHoverChildTitleColor;
-}
-
-
-/* Active */
-.ui.styled.accordion .active.title {
-  background: @styledActiveTitleBackground;
-  color: @styledActiveTitleColor;
-}
-.ui.styled.accordion .accordion .active.title {
-  background: @styledActiveChildTitleBackground;
-  color: @styledActiveChildTitleColor;
-}
-
-
-/*******************************
-            States
-*******************************/
-
-/*--------------
-     Active
----------------*/
-
-.ui.accordion .active.content,
-.ui.accordion .accordion .active.content {
-  display: block;
-}
-
-/*******************************
-           Variations
-*******************************/
-
-/*--------------
-     Fluid
----------------*/
-
-.ui.fluid.accordion,
-.ui.fluid.accordion .accordion {
-  width: 100%;
-}
-
-/*--------------
-     Inverted
----------------*/
-
-.ui.inverted.accordion .title:not(.ui) {
-  color: @invertedTitleColor;
-}
-
-.loadUIOverrides();
-
+/*!
+ * # Semantic UI - Accordion
+ * http://github.com/semantic-org/semantic-ui/
+ *
+ *
+ * Released under the MIT license
+ * http://opensource.org/licenses/MIT
+ *
+ */
+
+/*******************************
+            Theme
+*******************************/
+
+@type    : 'module';
+@element : 'accordion';
+
+@import (multiple) '../../theme.config';
+
+/*******************************
+            Accordion
+*******************************/
+
+.ui.accordion,
+.ui.accordion .accordion {
+  max-width: 100%;
+}
+.ui.accordion .accordion {
+  margin: @childAccordionMargin;
+  padding: @childAccordionPadding;
+}
+
+/* Title */
+.ui.accordion .title,
+.ui.accordion .accordion .title {
+  cursor: pointer;
+}
+
+/* Default Styling */
+.ui.accordion .title:not(.ui) {
+  padding: @titlePadding;
+  font-family: @titleFont;
+  font-size: @titleFontSize;
+  color: @titleColor;
+}
+
+/* Content */
+.ui.accordion .title ~ .content,
+.ui.accordion .accordion .title ~ .content {
+  display: none;
+}
+
+/* Default Styling */
+.ui.accordion:not(.styled) .title ~ .content:not(.ui),
+.ui.accordion:not(.styled) .accordion .title ~ .content:not(.ui) {
+  margin: @contentMargin;
+  padding: @contentPadding;
+}
+.ui.accordion:not(.styled) .title ~ .content:not(.ui):last-child {
+  padding-bottom: 0em;
+}
+
+/* Arrow */
+.ui.accordion .title .dropdown.icon,
+.ui.accordion .accordion .title .dropdown.icon {
+  display: @iconDisplay;
+  float: @iconFloat;
+  opacity: @iconOpacity;
+  width: @iconWidth;
+  height: @iconHeight;
+  margin: @iconMargin;
+  padding: @iconPadding;
+  font-size: @iconFontSize;
+  transition: @iconTransition;
+  vertical-align: @iconVerticalAlign;
+  transform: @iconTransform;
+}
+
+/*--------------
+    Coupling
+---------------*/
+
+/* Menu */
+.ui.accordion.menu .item .title {
+  display: block;
+  padding: @menuTitlePadding;
+}
+.ui.accordion.menu .item .title > .dropdown.icon {
+  float: @menuIconFloat;
+  margin: @menuIconMargin;
+  transform: @menuIconTransform;
+}
+
+/* Header */
+.ui.accordion .ui.header .dropdown.icon {
+  font-size: @iconFontSize;
+  margin: @iconMargin;
+}
+
+/*******************************
+            States
+*******************************/
+
+.ui.accordion .active.title .dropdown.icon,
+.ui.accordion .accordion .active.title .dropdown.icon {
+  transform: @activeIconTransform;
+}
+
+.ui.accordion.menu .item .active.title > .dropdown.icon {
+  transform: @activeIconTransform;
+}
+
+/*******************************
+            Types
+*******************************/
+
+/*--------------
+     Styled
+---------------*/
+
+.ui.styled.accordion {
+  width: @styledWidth;
+}
+
+.ui.styled.accordion,
+.ui.styled.accordion .accordion {
+  border-radius: @styledBorderRadius;
+  background: @styledBackground;
+  box-shadow: @styledBoxShadow;
+}
+.ui.styled.accordion .title,
+.ui.styled.accordion .accordion .title {
+  margin: @styledTitleMargin;
+  padding: @styledTitlePadding;
+  color: @styledTitleColor;
+  font-weight: @styledTitleFontWeight;
+  border-top: @styledTitleBorder;
+  transition: @styledTitleTransition;
+}
+.ui.styled.accordion > .title:first-child,
+.ui.styled.accordion .accordion .title:first-child {
+  border-top: none;
+}
+
+
+/* Content */
+.ui.styled.accordion .content,
+.ui.styled.accordion .accordion .content {
+  margin: @styledContentMargin;
+  padding: @styledContentPadding;
+}
+.ui.styled.accordion .accordion .content {
+  padding: @styledChildContentMargin;
+  padding: @styledChildContentPadding;
+}
+
+
+/* Hover */
+.ui.styled.accordion .title:hover,
+.ui.styled.accordion .active.title,
+.ui.styled.accordion .accordion .title:hover,
+.ui.styled.accordion .accordion .active.title {
+  background: @styledTitleHoverBackground;
+  color: @styledTitleHoverColor;
+}
+.ui.styled.accordion .accordion .title:hover,
+.ui.styled.accordion .accordion .active.title {
+  background: @styledHoverChildTitleBackground;
+  color: @styledHoverChildTitleColor;
+}
+
+
+/* Active */
+.ui.styled.accordion .active.title {
+  background: @styledActiveTitleBackground;
+  color: @styledActiveTitleColor;
+}
+.ui.styled.accordion .accordion .active.title {
+  background: @styledActiveChildTitleBackground;
+  color: @styledActiveChildTitleColor;
+}
+
+
+/*******************************
+            States
+*******************************/
+
+/*--------------
+     Active
+---------------*/
+
+.ui.accordion .active.content,
+.ui.accordion .accordion .active.content {
+  display: block;
+}
+
+/*******************************
+           Variations
+*******************************/
+
+/*--------------
+     Fluid
+---------------*/
+
+.ui.fluid.accordion,
+.ui.fluid.accordion .accordion {
+  width: 100%;
+}
+
+/*--------------
+     Inverted
+---------------*/
+
+.ui.inverted.accordion .title:not(.ui) {
+  color: @invertedTitleColor;
+}
+
+.loadUIOverrides();
+

package/v2Components/TemplatePreview/WechatRichmediaTemplatePreview/index.js

@@ -214,4 +214,4 @@ WechatRichmediaTemplatePreview.propTypes = {
 };
 
 export default WechatRichmediaTemplatePreview;
-// export default connect(null, null)(WechatRichmediaTemplatePreview);
+// export default connect(null, null)(WechatRichmediaTemplatePreview);

package/v2Components/TemplatePreview/index.js

@@ -17,8 +17,12 @@ import messages from './messages';
 import { WECHAT } from '../../v2Containers/CreativesContainer/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 lineImgPlaceholder = require('../../assets/line-image-placeholder.svg');
+const lineStickerPlaceholder = require('../../assets/smiley-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 } from '@capillarytech/cap-ui-library/styled/variables';
 
 class TemplatePreview extends React.Component { // eslint-disable-line react/prefer-stateless-function
   onPreviewContentClicked = (channel) => {
@@ -151,6 +155,25 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
     const showTestAndPreview = showTestAndPreviewIcon && 
         channel !== WECHAT &&
         ['outbound', 'library'].includes(module);
+
+    const renderLineMultiText = (content)  => {
+      let textCount = 0;
+      return content.map((item) => {
+        const { type, messageContent = '' } = item || {};
+        if (type === 'text' && messageContent) {
+          textCount += 1;
+          return (
+            <p style={{fontSize: 16, fontWeight: "bold", margin: 0}}>
+              {this.props.intl.formatMessage(messages.textMessageLabel)}
+              {textCount}: ({messageContent.length}/{1600} {this.props.intl.formatMessage(messages.textMessageCharacter)})
+            </p>
+          )
+        }
+        return null
+      });
+    }
+    
+
     return (
       <CapRow>
         {this.props.showCount && <CapColumn span={16}>
@@ -285,25 +308,154 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
         }
             {
           channel && channel.toLowerCase() === 'line' ? (
-            <div className="shell-v2 align-center" id="sms-preview">
-              <CapImage className="preview-image" src={smsMobileAndroid} alt={this.props.intl.formatMessage(messages.previewGenerated)}/>
-              <div className="msgContainer line-preview">
-                <div className="sms-icon" style={{ left: 10, borderRadius: '50%', width: '20px', height: '20px', background: '#2E89DF' }}></div>
-                <div className="message-pop align-left" style={{ background: '#ffffff', color: '#333333' }}>
+            <div className="shell-v2 align-center" id="sms-preview" style={{ marginLeft: 12 }}>
+              <CapImage className="preview-image" src={lineMobileAndroid} alt={this.props.intl.formatMessage(messages.previewGenerated)}/>
+              <div
+                className="msgContainer line-preview"
+                style={{
+                  maxHeight: 300,
+                  overflow: 'scroll',
+                  flexDirection: 'column',
+                  marginLeft: 40,
+                }}
+              >
+                <div className="sms-icon"
+                  style={{
+                    left: 0,
+                    top: 8,
+                    borderRadius: '50%',
+                    width: 20,
+                    height: 20,
+                    background: CAP_COLOR_03,
+                    paddingRight: 5
+                  }}
+                >
+                  {this.props.LineAccountName}
+                </div>
+                <>
                   {
-                    content && Object.keys(content).map((item) => {
-                      if (item === 'bodyText' && content[item]) {
-                        return content[item];
+                    content.map((item) => {
+                      const {
+                        type,
+                        messageContent,
+                        previewImageUrl = lineImgPlaceholder,
+                        baseUrl,
+                        selectedSticker = {
+                          stickerUrl: lineStickerPlaceholder,
+                        },
+                      } = item || {};
+                      if (type === 'text') {
+                        return (
+                          <div
+                            className="message-pop align-left"
+                            style={{
+                              background: CAP_WHITE,
+                              color: FONT_COLOR_01,
+                              borderRadius: 8,
+                              position: 'static',
+                              margin: '6px 0 20px 28px',
+                              height: 'auto'
+                            }}
+                          >
+                            <p style={{ marginBottom: 5 }}>{messageContent || ''}</p>
+                          </div>
+                        );
                       }
-                      if (item === 'bodyImage' && content[item]) {
-                        return <CapImage src={content[item]} alt="brand-name" style={{maxWidth: '100%'}}/>;
+                      if ((type === 'image' && previewImageUrl)) {
+                        return (
+                          <div
+                            className="message-pop align-left"
+                            style={{
+                              background: CAP_G08,
+                              color: FONT_COLOR_01,
+                              borderRadius: 8,
+                              position: 'static',
+                              margin: '6px 0 20px 28px',
+                              height: 184,
+                              display: 'flex',
+                              justifyContent: 'center',
+                              alignItems: 'center',
+                            }}
+                          >
+                            <CapImage
+                              src={previewImageUrl}
+                              alt="brand-name"
+                              rest={{
+                                style: {
+                                  maxWidth: '100%',
+                                  marginBottom: 5,
+                                },
+                              }}
+                            />
+                          </div>  
+                        );
+                      }
+                      if ((type === 'imagemap' && baseUrl)) {
+                        return (
+                          <div
+                            className="message-pop align-left"
+                            style={{
+                              background: CAP_G08,
+                              color: FONT_COLOR_01,
+                              borderRadius: 8,
+                              position: 'static',
+                              margin: '6px 0 20px 28px',
+                              height: 184,
+                              display: 'flex',
+                              justifyContent: 'center',
+                              alignItems: 'center',
+                            }}
+                          >
+                            <CapImage
+                              src={baseUrl ? `${baseUrl}/1040` : lineImgPlaceholder}
+                              alt="brand-name"
+                              rest={{
+                                style: {
+                                  maxWidth: '100%',
+                                  marginBottom: 5,
+                                },
+                              }}
+                            />
+                          </div>  
+                        );
+                      }
+                      if (type === 'sticker' && selectedSticker) {
+                        return (
+                          <div
+                            className="message-pop align-left"
+                            style={{
+                              background: 'transparent',
+                              color: FONT_COLOR_01,
+                              color: FONT_COLOR_01,
+                              position: 'static',
+                              margin: '6px 0 20px 10px',
+                              display: 'flex',
+                              justifyContent: 'center',
+                              alignItems: 'center',
+                            }}
+                          >
+                            <CapImage 
+                              src={selectedSticker.stickerUrl}
+                              style={{maxWidth: '100%', marginBottom: 5 }}
+                              rest={{
+                                style: {
+                                  maxWidth: '100%',
+                                  marginBottom: 5,
+                                },
+                                height: 70,
+                                onMouseOut: e => (e.currentTarget.src = selectedSticker.stickerUrl),
+                                onMouseOver: e => (e.currentTarget.src = selectedSticker.animatedStickerUrl ||  selectedSticker.stickerUrl),
+                              }}
+                            />
+                          </div>  
+                        );
                       }
                       return null;
                     })
                   }
-                </div>
+                </>
               </div>
-              { (content && content.bodyText) ? <p style={{fontSize: 16, fontWeight: "bold"}}>Chars Count: {content.bodyText.length} / (1600)</p> : '' }
+              {renderLineMultiText(content)}
             </div>
           ) : ''
         }

package/v2Components/TemplatePreview/messages.js

@@ -58,4 +58,12 @@ export default defineMessages({
     id: 'creatives.componentsV2.TemplatePreview.testMessage',
     defaultMessage: 'Test Message',
   },
+  textMessageLabel: {
+    id: 'creatives.componentsV2.TemplatePreview.textMessageLabel',
+    defaultMessage: 'text msg-',
+  },
+  textMessageCharacter: {
+    id: 'creatives.componentsV2.TemplatePreview.textMessageCharacter',
+    defaultMessage: 'characters',
+  },
 });