@capillarytech/creatives-library 8.0.136-alpha.4 → 8.0.136-beta.3

package/components/TemplatePreview/assets/images/wechat_mobile_android.svg

@@ -0,0 +1,20 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="220" height="472" viewBox="0 0 220 472">
+    <g fill="none" fill-rule="evenodd">
+        <rect width="220" height="472" fill="#101211" rx="26"/>
+        <rect width="202" height="404" x="9" y="36" fill="#F4F5F7" rx="9"/>
+        <rect width="182" height="136" x="19" y="112" fill="#F4F5F7" rx="17.5"/>
+        <path fill="#F4F5F7" d="M18 36h184c4.97 0 9 4.03 9 9v6H9v-6c0-4.97 4.03-9 9-9z"/>
+        <path fill="#F4F5F7" d="M9 51H211V82H9z" transform="matrix(1 0 0 -1 0 133)"/>
+        <rect width="52" height="5" x="84" y="14" fill="#2E2E2E" rx="2.5"/>
+        <rect width="52" height="5" x="84" y="455" fill="#2E2E2E" rx="2.5"/>
+        <circle cx="45.5" cy="19.5" r="5.5" fill="#2E2E2E"/>
+        <circle cx="65.5" cy="19.5" r="3.5" fill="#2E2E2E"/>
+        <text fill="#000" font-family="Roboto-Regular, Roboto" font-size="12" letter-spacing=".175">
+            <tspan x="49.5" y="71">Muji India</tspan>
+        </text>
+        <circle cx="199" cy="63" r="1" fill="#000"/>
+        <circle cx="199" cy="70" r="1" fill="#000"/>
+        <circle cx="199" cy="66.5" r="1" fill="#000"/>
+        <path fill="#000" d="M28 66c0 .279-.226.505-.505.505h-5.556l2.42 2.42c.198.197.198.518 0 .716-.198.198-.52.198-.718 0l-2.934-2.934c-.39-.39-.39-1.024 0-1.414l2.934-2.934c.198-.198.52-.198.718 0 .198.198.198.519 0 .717l-2.42 2.419h5.556c.279 0 .505.226.505.505z"/>
+    </g>
+</svg>

package/components/TemplatePreview/index.js

@@ -0,0 +1,617 @@
+/**
+*
+* TemplatePreview
+*
+*/
+
+import PropTypes from 'prop-types';
+
+import React from 'react';
+import _ from 'lodash';
+import { injectIntl, intlShape, FormattedMessage} from 'react-intl';
+import {CapColumn, CapTab, CapIcon, CapLabel, CapImage, CapTooltip, CapButton } from '@capillarytech/cap-ui-library';
+import './_templatePreview.scss';
+import Carousel from '../../v2Components/Carousel';
+import {updateCharCount} from '../../utils/smsCharCountV2';
+import messages from './messages';
+const smsIcon = require('./assets/images/user-icon.svg');
+const smsMobileAndroid = require('./assets/images/sms_mobile_android.svg');
+const wechatMobileAndroid = require('./assets/images/wechat_mobile_android.svg');
+const smsMobileIos = require('./assets/images/sms_mobile_ios.svg');
+const smsAndroidHomeScreen = require('./assets/images/home-screen-android.svg');
+const lineMobileAndroid = require('../../assets/line.png');
+const lineImgPlaceholder = require('../../assets/line-image-placeholder.svg');
+const lineStickerPlaceholder = require('../../assets/smiley-placeholder.svg');
+const smsIosHomeScreen = require('./assets/images/home-screen-ios.svg');
+const wechatBody = require('./assets/images/WECHAT_5x.png');
+const smsBody = require('./assets/images/mobile.svg');
+const androidPushMessagePhone = require('./assets/images/androidPushMessage.svg');
+const iPhonePushMessagePhone = require('./assets/images/iPhonePushMessage.svg');
+const lineVideoPlaceholder = require('../../assets/rich-video-placeholder.svg');
+import { CAP_COLOR_03, CAP_WHITE, FONT_COLOR_01, CAP_G08, CAP_G06 } from '@capillarytech/cap-ui-library/styled/variables';
+import { TEMPLATE, IMAGE_CAROUSEL, IMAGE_MAP_CAMEL_CASE, IMAGE, STICKER, TEXT, VIDEO } from '../../v2Containers/Line/Container/constants';
+
+class TemplatePreview extends React.Component { // eslint-disable-line react/prefer-stateless-function
+  getWechatAndroidPreview = (content) => (
+    <div className="shell-lock-screen-android align-center" id="sms-preview">
+      <div className="lock-screen-preview">
+        <CapImage className="preview-image sms" src={smsAndroidHomeScreen} alt={this.props.intl.formatMessage(messages.previewGenerated)}/>
+        <div className="lock-msgContainer wechat">
+          <div className="sender-id-text">
+            {this.props.intl.formatMessage(messages.senderId)}
+          </div>
+          <div className="message-text-container">
+            <CapLabel type="label1" style={{ height: '15px' }} >{content}</CapLabel>
+          </div>
+        </div>
+        <div className="action-text">
+          <FormattedMessage {...messages.markAsRead}/> <FormattedMessage {...messages.reply}/>
+        </div>
+      </div>
+      <div className="main-screen-preview">
+        <CapImage className="preview-image" src={wechatMobileAndroid} alt={this.props.intl.formatMessage(messages.previewGenerated)}/>
+        <div className="msgContainer wechat">
+          <div className="message-pop wechat align-left" style={{ background: '#ffffff', color: '#333333' }}>
+            {content}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+
+  getWechatIosPreview = (content) => (
+    <div className="shell-lock-screen-ios align-center" id="sms-preview">
+      <div className="lock-screen-preview">
+        <CapImage className="preview-image sms" src={smsIosHomeScreen} alt={this.props.intl.formatMessage(messages.previewGenerated)}/>
+        <div className="lock-msgContainer wechat">
+          <div className="sender-id-text">
+            {this.props.intl.formatMessage(messages.senderId)}
+          </div>
+          <div className="message-text-container">
+            <CapLabel type="label1" style={{ height: '15px' }} >{content}</CapLabel>
+          </div>
+        </div>
+        <div className="action-text-reply">
+          <FormattedMessage {...messages.reply}/>
+        </div>
+        <div className="action-text-cancel">
+          <FormattedMessage {...messages.cancel}/>
+        </div>
+      </div>
+      <div className="main-screen-preview">
+        <CapImage className="preview-image" src={wechatMobileAndroid} alt={this.props.intl.formatMessage(messages.previewGenerated)}/>
+        <div className="msgContainer wechat">
+          <div className="message-pop wechat align-left" style={{ background: '#ffffff', color: '#333333' }}>
+            {content}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+
+  getSmsAndroidPreview = (content) => (
+    <div className="shell-lock-screen-android align-center" id="sms-preview">
+      <div className="lock-screen-preview">
+        <CapImage className="preview-image sms" src={smsAndroidHomeScreen} alt={this.props.intl.formatMessage(messages.previewGenerated)}/>
+        <div className="lock-msgContainer sms">
+          <div className="sender-id-text">
+            {this.props.intl.formatMessage(messages.senderId)}
+          </div>
+          <div className="message-text-container">
+            <CapLabel type="label1" style={{ height: '15px' }} >{content}</CapLabel>
+          </div>
+        </div>
+        <div className="action-text">
+          <FormattedMessage {...messages.markAsRead}/> <FormattedMessage {...messages.reply}/>
+        </div>
+      </div>
+      <div className="main-screen-preview">
+        <CapImage className="preview-image sms" src={smsMobileAndroid} alt={this.props.intl.formatMessage(messages.previewGenerated)}/>
+        <div className="msgContainer sms">
+          <div className={"message-pop sms"}>
+            {content && content.length && content.map((msg) =>
+              <CapColumn className="message-pop-item align-left" style={{ background: '#FFFFFF', color: '#091e42'}}>
+                {msg}
+              </CapColumn>)
+            }
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+
+  getSmsIosPreview = (content) => (
+    <div className="shell-lock-screen-ios align-center" id="sms-preview">
+      <div className="lock-screen-preview">
+        <CapImage className="preview-image sms" src={smsIosHomeScreen} alt={this.props.intl.formatMessage(messages.previewGenerated)}/>
+        <div className="lock-msgContainer sms">
+          <div className="sender-id-text">
+            {this.props.intl.formatMessage(messages.senderId)}
+          </div>
+          <div className="message-text-container">
+            <CapLabel type="label1" style={{ height: '15px' }} >{content}</CapLabel>
+          </div>
+        </div>
+        <div className="action-text-reply">
+          <FormattedMessage {...messages.reply}/>
+        </div>
+        <div className="action-text-cancel">
+          <FormattedMessage {...messages.cancel}/>
+        </div>
+      </div>
+      <div className="main-screen-preview">
+        <CapImage className="preview-image sms" src={smsMobileIos} alt={this.props.intl.formatMessage(messages.previewGenerated)}/>
+        <div className="msgContainer sms">
+          <div className={"message-pop sms"}>
+            {content && content.length && content.map((msg) =>
+              <CapColumn className="message-pop-item align-left" style={{ background: '#ebecf0', color: '#091e42'}}>
+                {msg}
+              </CapColumn>)
+            }
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+
+  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}}>
+              text msg-{textCount}: ({messageContent.length}/{1600} characters)
+            </p>
+          )
+        }
+        return null
+      });
+    }
+
+  render() {
+    
+    const channel = this.props.channel;
+    let content = channel && channel.toLowerCase() === 'sms' ? [this.props.content] : this.props.content;
+    let smsDetails = {};
+    // let smsText = '';
+    if (this.props.content && this.props.charCounterEnabled) {
+      smsDetails = updateCharCount(this.props.content, this.props.unicodeEnabled);
+      content = [];
+      for (let i = 0, limit = 0; i < smsDetails.parts; i += 1, limit += smsDetails.chars_sms) {
+        content.push(smsDetails.char_list.slice(limit, smsDetails.chars_sms * (i + 1)));
+      }
+      if (document.getElementById("msg_count")) {
+        document.getElementById("msg_count").val = smsDetails.parts;
+      }
+      //smsText = this.props.intl.formatMessage(messages.previewGenerationMessage);
+      //
+    }
+    const showLockScreenPreview = !!this.props.showLockScreenPreview;
+    const type = this.props.location && this.props.location.query.type ? this.props.location.query.type : '';
+    const { containsUnicodeContent = false } = this.props;
+    let iosActions = [];
+    if ((channel || '').toLowerCase() === "mobilepush") {
+      iosActions = _.map(content.actions, (action) => {
+        if (action.label) {
+          return (<div className="actions">
+            <span className="action">{action.label.toUpperCase()}</span>
+          </div>);
+        }
+        return undefined;
+      });
+    }
+
+    const getVideoContent = ({
+      video,
+      actionUrl,
+      sectionStyle,
+    }) => (
+      <div
+        className="message-pop align-left"
+        style={{
+          ...sectionStyle,
+          minHeight: 184,
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          backgroundColor: !video ? 'transparent' : CAP_G06,
+          marginTop: 0,
+          padding: 0,
+        }}
+        key={video}
+      >
+        {
+          video
+          ? (
+            <>
+              <video style={{ opacity: 0.5, width: '100%' }}>
+                <source src={video} type="video/mp4" />
+              </video>
+              <div
+                style={{
+                  position: 'absolute',
+                  display: 'flex',
+                  flexDirection: 'column',
+                }}
+              >
+                <CapButton
+                  className="preview-video-btn"
+                  type="flat"
+                >
+                  <CapIcon type="play"/>
+                  <FormattedMessage {...messages.playVideo} />
+                </CapButton>
+                {
+                  actionUrl
+                  ? (
+                    <CapButton
+                      className="preview-video-btn"
+                      type="flat"
+                    >
+                      <CapIcon type="reply" style={{ fontSize: 18 }}/>
+                      <FormattedMessage {...messages.showDetails} />
+                    </CapButton>
+                  )
+                  : null
+                }
+              </div>
+            </>
+          )
+          : (
+            <CapImage
+              src={lineVideoPlaceholder}
+              alt="brand-name"
+              rest={{
+                style: {
+                  width: 126,
+                  marginBottom: 5,
+                },
+              }}
+            />
+          )
+        }
+      </div>  
+    );
+
+    return (
+      <div className={`preview-container ${type === 'embedded' ? 'embedded-preview' : ''}`}>
+        { (channel || '').toLowerCase() === 'sms' &&
+            (showLockScreenPreview ? (
+              <CapTab
+                panes={[
+                  {
+                    content: this.getSmsAndroidPreview(content),
+                    tab: <CapIcon type="android" size="m" />,
+                    key: 'android',
+                  },
+                  {
+                    content: this.getSmsIosPreview(content),
+                    tab: <CapIcon type="ios" size="m" />,
+                    key: 'ios',
+                  },
+                ]}
+                tabBarStyle={{margin: 'auto', width: '14%'}}
+              />
+            ) : (
+              <div className="shell align-center" id="sms-preview">
+                <CapImage className="preview-image sms" src={smsMobileAndroid} alt={this.props.intl.formatMessage(messages.previewGenerated)}/>
+                <div className="msgContainer sms">
+                  <div className={"message-pop sms"}>
+                    {content && content.length && content.map((msg) =>
+                      <CapColumn className="message-pop-item align-left" style={{ background: '#FFFFFF', color: '#091e42'}}>
+                        {msg}
+                      </CapColumn>)
+                }
+                  </div>
+                </div>
+              </div>)
+            )}
+        {(channel || '').toLowerCase() === 'wechat' &&
+          (showLockScreenPreview ? (
+            <CapTab
+              panes={[
+                {
+                  content: this.getWechatAndroidPreview(content),
+                  tab: <CapIcon type="android" size="m" />,
+                  key: 'android',
+                },
+                {
+                  content: this.getWechatIosPreview(content),
+                  tab: <CapIcon type="ios" size="m" />,
+                  key: 'ios',
+                },
+              ]}
+              tabBarStyle={{margin: 'auto', width: '14%'}}
+            />
+          ) : (
+            <div className="shell align-center" id="sms-preview">
+              <CapImage className="preview-image" src={(channel || '').toLowerCase() === 'wechat' ? wechatMobileAndroid : smsBody} alt={this.props.intl.formatMessage(messages.previewGenerated)}/>
+              <div className="msgContainer">
+                <div className="message-pop align-left" style={{ background: `${(this.props.channel || '').toLowerCase() === 'wechat' ? '#ffffff' : '#3F51B5'}`, color: `${(this.props.channel || '').toLowerCase() === 'wechat' ? '#333333' : '#ffffff'}`}}>{content}
+                </div>
+              </div>
+            </div>
+          )
+        )}
+        { (channel || '').toLowerCase() === 'mobilepush' &&
+          (<div className="shell align-center" id="mobilepush-preview">
+            <CapImage className="preview-image" src={this.props.device === "android" ? androidPushMessagePhone : iPhonePushMessagePhone} alt={this.props.intl.formatMessage(messages.previewGenerated)}/>
+              {(!!content.header || !!content.bodyText || !!content.bodyImage) &&
+                <div className={`${this.props.device}-push-message-Container`}>
+                  {this.props.device === "android" ?
+                    <div className="message-pop align-left">
+                      <div className="app-name">
+                        <span className="app-icon"></span> {content.appName ? content.appName : "App name"}
+                      </div>
+                      <div className="title">
+                        {content.header}
+                      </div>
+                      <div className="body-text">
+                        {content.bodyText}
+                      </div>
+                      {content.bodyImage && <div className="body-image">
+                        <CapImage src={content.bodyImage} alt="" />
+                      </div>}
+                      {content.actions.filter((action) => action.label).length ?
+                        <div className="actions">
+                          {_.map(content.actions, (action) => !!action.label &&
+                            <span className="action">{action.label && action.label.toUpperCase()}</span>)}
+                        </div>
+                        : ''
+                      }
+                    </div>
+                    :
+                    <div className="message-pop align-left">
+                      <div className="app-name">
+                        <span className="app-icon"></span>{content.appName ? content.appName : "App name"} <i className="material-icons">{this.props.intl.formatMessage(messages.close)}</i>
+                      </div>
+                      {content.bodyImage && <div className="body-image">
+                        <CapImage src={content.bodyImage} alt=""/>
+                      </div>}
+                      <div className="title">
+                        {content.header}
+                      </div>
+                      <div className="body-text">
+                        {content.bodyText}
+                      </div>
+                      {content.actions.filter((action) => action.label).length ? iosActions : ''}
+                    </div>
+                  }
+                </div>
+              }
+          </div>
+          )
+        }
+        {
+          (channel || '').toLowerCase() === 'line' ? (
+            <div className="shell align-center" id="sms-preview">
+              <CapImage className="preview-image" src={wechatBody} alt={this.props.intl.formatMessage(messages.previewGenerated)}/>
+              {
+                content && Array.isArray(content)
+                ? (
+                  <>
+                    <div
+                      className="msgContainer line-preview"
+                      style={{
+                        maxHeight: 300,
+                        overflow: 'scroll',
+                        flexDirection: 'column',
+                        marginLeft: 40,
+                        left: '20%',
+                      }}
+                    >
+                      <div
+                        className="sms-icon"
+                        style={{
+                          width: 25,
+                          height: 25,
+                          background: '#2E89DF',
+                          borderRadius: '50%',
+                          paddingTop: 2,
+                          top: 12,
+                        }}
+                      >
+                        {this.props.lineAccountName}
+                      </div>
+                      {
+                        content.map((item) => {
+                          const {
+                            type,
+                            messageContent,
+                            previewImageUrl = lineImgPlaceholder,
+                            baseUrl,
+                            selectedSticker = {
+                              stickerUrl: lineStickerPlaceholder,
+                            },
+                            imageCarousel = [lineImgPlaceholder],
+                            video,
+                            actionUrl,
+                          } = item || {};
+                          const sectionStyle = {
+                            background: CAP_WHITE,
+                            color: FONT_COLOR_01,
+                            borderRadius: 8,
+                            position: 'static',
+                            margin: '6px 0 20px 28px',
+                            height: 'auto',
+                            minHeight: 'auto',
+                            overflow: 'initial',
+                            maxHeight: 'initial',
+                          };
+                          if (type === TEXT) {
+                            return (
+                              <div
+                                className="message-pop align-left"
+                                style={sectionStyle}
+                              >
+                                <p style={{ marginBottom: 5 }}>{messageContent || ''}</p>
+                              </div>
+                            );
+                          }
+                        if ((type === IMAGE && previewImageUrl)) {
+                            return (
+                              <div
+                                className="message-pop align-left"
+                                style={{
+                                  ...sectionStyle,
+                                  minHeight: 184,
+                                  display: 'flex',
+                                  justifyContent: 'center',
+                                  alignItems: 'center',
+                                }}
+                              >
+                                <CapImage
+                                  src={previewImageUrl}
+                                  className="line-image-preview"
+                                  alt="brand-name"
+                                  rest={{
+                                    style: {
+                                      maxWidth: '100%',
+                                      marginBottom: 5,
+                                    },
+                                  }}
+                                />
+                              </div>  
+                            );
+                          }
+                          if (type === VIDEO) {
+                            return getVideoContent({ video, actionUrl, sectionStyle });
+                          }
+                          if ((type === IMAGE_MAP_CAMEL_CASE && baseUrl)) {
+                            if (video) {
+                              return getVideoContent({ video, actionUrl, sectionStyle });
+                            }
+                            return (
+                              <div
+                                className="message-pop align-left"
+                                style={{
+                                  ...sectionStyle,
+                                  minHeight: 184,
+                                  display: 'flex',
+                                  justifyContent: 'center',
+                                  alignItems: 'center',
+                                }}
+                              >
+                                <CapImage
+                                  src={baseUrl ? `${baseUrl}/1040` : lineImgPlaceholder}
+                                  className="line-image-preview"
+                                  alt="brand-name"
+                                  rest={{
+                                    style: {
+                                      maxWidth: '100%',
+                                      marginBottom: 5,
+                                    },
+                                  }}
+                                />
+                              </div>  
+                            );
+                          }
+                          if (type === STICKER && selectedSticker) {
+                            return (
+                              <div
+                                className="message-pop align-left"
+                                style={{
+                                  ...sectionStyle,
+                                  background: 'transparent',
+                                  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>  
+                            );
+                          }
+                          if ((type === IMAGE_CAROUSEL || type === TEMPLATE) && imageCarousel) {
+                            return (
+                              <div
+                                style={{
+                                  margin: '40px 0 8px',
+                                }}
+                              >
+                                <Carousel imageCarousel={imageCarousel}/>
+                              </div>
+                            )
+                          }
+                          return null;
+                        })
+                      }
+                    </div>
+                    {this.renderLineMultiText(content)}
+                  </>
+                )
+                : (
+                  <>
+                    <div className="msgContainer line-preview">
+                      <div className="sms-icon" style={{ width: '25px', height: '25px', background: '#2E89DF' }}></div>
+                      <div className="message-pop align-left" style={{ background: '#ffffff', color: '#333333' }}>
+                        { (content && content.bodyImage) ? <CapImage src={content.bodyImage} alt="ddd" style={{maxWidth: '100%'}}/> : '' }
+                        { (content && content.bodyText) ? content.bodyText : ''}
+                      </div>
+                    </div>
+                    { (content && content.bodyText) ? <p style={{fontSize: 16, fontWeight: "bold"}}>Chars Count: {content.bodyText.length} / (1600)</p> : '' }
+                  </>
+                )
+              }
+              
+            </div>
+          ) : ''
+        }
+        {
+          this.props.charCounterEnabled && !_.isEmpty(smsDetails) ?
+            <div>
+              <p className="preview-info">
+                {smsDetails.unicode &&
+                <div style={{fontSize: '16px'}}>{`${this.props.intl.formatMessage(messages.smsFormatType)}`}</div>
+                }
+                <div style={{marginTop: '8px', fontSize: '16px', display: 'inline-flex'}} >
+                  {`${smsDetails.parts} ${this.props.intl.formatMessage(messages.sms)} (${smsDetails.chars_used} ${this.props.intl.formatMessage(messages.characters)})`}
+                  {containsUnicodeContent &&
+                    <CapTooltip
+                      title={this.props.intl.formatMessage(
+                        messages.unicodeIconTooltip,
+                      )}
+                    >
+                      <CapIcon type="unicode" style={{ marginLeft: 4 }} />
+                    </CapTooltip>
+                  }
+                </div>
+                {smsDetails.optoutUrlPresent && <div style={{fontWeight: '100', fontSize: '12px'}}>
+                  {`${this.props.intl.formatMessage(messages.includesOptoutTag)} (${smsDetails.optouturlLength} ${this.props.intl.formatMessage(messages.characters)})`}
+                </div>}
+              </p>
+            </div>
+            : ''
+        }
+      </div>
+    );
+  }
+}
+TemplatePreview.propTypes = {
+  content: PropTypes.oneOfType([
+    PropTypes.object,
+    PropTypes.string,
+  ]),
+  channel: PropTypes.string,
+  charCounterEnabled: PropTypes.bool,
+  location: PropTypes.object,
+  intl: intlShape.isRequired,
+  device: PropTypes.string,
+  unicodeEnabled: PropTypes.bool,
+};
+
+export default (injectIntl(TemplatePreview));