@capillarytech/creatives-library 8.0.135 → 8.0.136-alpha.1

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

@@ -1,20 +0,0 @@
-<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

@@ -1,617 +0,0 @@
-/**
-*
-* 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));