@capillarytech/creatives-library 3.0.5 → 3.0.7

package/components/SmsPreviewV2/_smsPreviewV2.scss

@@ -1,353 +0,0 @@
-.shell {
-    position: relative;
-    -webkit-transform: translate(-50%);
-    transform: translate(-50%);
-    left: 50%;
-    padding: 0 10px;
-    width: 450px;
-  
-    .preview-image {
-        width: 51%;
-        &.sms {
-          width: 45%;
-        }
-    }
-  
-    .msgContainer {
-      position: absolute;
-      top: 18%;
-      left: 28.8%;
-      width: 42%;
-      height: 336px;
-      display: -webkit-box;
-      display: -ms-flexbox;
-      display: flex;
-  
-      .sms-icon{
-        top: 0;
-        left: 2px;
-        width: 25px;
-        position: absolute;
-      }
-      &.sms{
-        height: 290px;
-        width: 40%;
-        .sms-icon{
-          width: 20px;
-          left: 14px;
-        }
-      }
-  
-      .message-pop{
-        .unicode-disabled{
-          font-size: 16px;
-        }
-        &.sms {
-          max-height: 100%;
-          position: absolute;
-          // width: initial;
-          overflow: auto;
-          top: 0;
-          left: 17%;
-          white-space: pre-wrap;
-          word-break: break-word;
-          line-height: 14px;
-          padding: 0 8px 8px 8px;
-          font-size: 10px;
-          width: 80%;
-          font-family: 'open-sans';
-          .message-pop-item{
-            padding: 4px;
-            background: #3F51B5;
-            color: #FFFFFF;
-            margin-top: 8px;
-            border-radius: 4px;
-            min-height: 26px;
-            &:first-child{
-              margin-top: 0;
-            }
-          }
-        }
-        &:not(.sms){
-          padding: 4px;
-          background: #3F51B5;
-          position: absolute;
-          // width: initial;
-          overflow: auto;
-          top: 0;
-          left: 17%;
-          white-space: pre-wrap;
-          word-break: break-word;
-          border-radius: 4px;
-          max-height: 100%;
-          color: #FFFFFF;
-          width: 70%;
-          min-height: 26px;
-          line-height: 14px;
-          padding: 8px;
-          font-size: 10px;
-          font-family: 'open-sans';
-        }
-      }
-    }
-    .android-push-message-Container, .iphone-push-message-Container{
-      position: absolute;
-      top: 11%;
-      left: 28.8%;
-      width: 42%;
-      height: 336px;
-      overflow: auto;
-      display: -webkit-box;
-      display: -ms-flexbox;
-      display: flex;
-      .message-pop{
-        position: absolute;
-        // width: initial;
-        overflow: auto;
-        word-wrap: break-word;
-        white-space: pre-wrap;
-        border-top-left-radius: 4px;
-        border-top-right-radius: 4px;
-        max-height: 100%;
-        width: 100%;
-        min-height: 26px;
-        line-height: 15px;
-        font-size: 10px;
-        .body-image{
-          img{
-            max-width: 100%;
-            max-height: 90px;
-            margin: auto;
-            display: block;
-          }
-        }
-      }
-    }
-    .android-push-message-Container{
-      .title, .body-text, .body-image, .app-name{
-        background-color: #FFFFFF;
-        color: #333333;
-      }
-      .app-name{
-        color: #5D5D5D;
-        font-weight: 600;
-        padding: 8px 8px 4px 8px;
-      }
-      .title, .body-image{
-        padding: 0 8px 0 8px;
-  
-      }
-      .body-text{
-        padding: 0 8px 4px 8px;
-        color: #5a5959;
-      }
-      .title{
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-      }
-      .actions{
-        background-color: #EEEEEE;
-        height: 32px;
-        padding: 4px;
-        .action{
-          line-height: 24px;
-          font-size: 10px;
-          font-weight: 600;
-          color: #1970DA;
-          height: 12px;
-          margin-left: 8px;
-        }
-      }
-    }
-    .iphone-push-message-Container{
-      top: 8%;
-      .message-pop{
-        border-radius: 4px;
-        word-wrap: break-word;
-      }
-      .title, .body-text, .body-image, .app-name{
-        background-color: #FFFFFF;
-        color: #333333;
-      }
-      .body-image{
-        padding-top: 8px;
-      }
-      .title{
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-      }
-      .app-name{
-        padding: 8px;
-        color: #5D5D5D;
-        border-bottom: solid 1px #D6D6D6;
-        .material-icons{
-          font-size: 12px;
-          float: right;
-        }
-      }
-      .title, .body-text{
-        padding: 4px;
-      }
-      .title{
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-      }
-      .body-text{
-        border-bottom-left-radius: 4px;
-        border-bottom-right-radius: 4px;
-      }
-      .actions{
-        background-color: #FFFFFF;
-        opacity: 0.8;
-        height: 32px;
-        line-height: 26px;
-        margin-top: 4px;
-        border-radius: 6px;
-        text-align: center;
-        padding: 4px;
-        .action{
-          font-size: 12px;
-          font-weight: 600;
-          color: #000000;
-          text-align: center;
-          margin-left: 8px;
-        }
-      }
-    }
-  }
-  
-  .align-center {
-    text-align: center;
-  }
-  
-  .align-left {
-    text-align: left;
-  }
-  
-  .preview-container{
-    .preview-info {
-      // font-family: 'proxima-nova';
-      font-weight: 600;
-      font-size: 16px;
-      text-align: center;
-    }
-  }
-  
-  .preview-container.embedded-preview{
-    .preview-image {
-      width: 38% !important;
-    }
-    .message-pop{
-      left: 21% !important;
-      width: 67% !important;
-    }
-    .sms-icon{
-      left: 12% !important;
-    }
-  }
-  
-  
-  
-  #slidebox-container {
-    left: 60vw;
-    width: 40vw;
-  
-    .shell {
-      position: relative;
-      -webkit-transform: translate(-50%);
-      transform: translate(-50%);
-      left: 50%;
-      padding: 0 10px;
-      width: initial;
-  
-      .preview-image {
-        &.sms{
-          width: 45%;
-        }
-      }
-  
-  
-      .msgContainer {
-        position: absolute;
-        top: 14%;
-        left: 29%;
-        width: 42%;
-        height: 275px;
-        display: -webkit-box;
-        display: -ms-flexbox;
-        display: flex;
-  
-        .sms-icon{
-          top: 6%;
-          left: 2%;
-          width: 12%;
-          position: absolute;
-        }
-  
-        &.sms{
-          height: 290px;
-          width: 40%;
-          top: 16%;
-          .sms-icon{
-            left: 7%;
-          }
-        }
-        .message-pop{
-          &.sms {
-            max-height: 100%;
-            position: absolute;
-            // width: initial;
-            overflow: auto;
-            top: 6%;
-            left: 17%;
-            width: 80%;
-            white-space: pre-wrap;
-            word-break: break-word;
-            line-height: 14px;
-            padding: 0 8px 8px 8px;
-            font-size: 10px;
-            font-family: 'open-sans';
-            .message-pop-item{
-              padding: 8px;
-              background: #3F51B5;
-              color: #FFFFFF;
-              margin-top: 8px;
-              border-radius: 4px;
-              min-height: 26px;
-              &:first-child{
-                margin-top: 0;
-              }
-            }
-          }
-          &:not(.sms){
-            padding: 8px 8px;
-            background: #3F51B5;
-            position: absolute;
-            width: 65%;
-            top: 15%;
-            left: 19%;
-            word-break: break-all;
-            border-radius: 6px;
-            max-height: 100%;
-            overflow: auto;
-            color: #FFFFFF;
-            line-height: 14px;
-            font-family: "open-sans";
-            font-size: 10px;
-          }
-        }
-      }
-    }
-  }
-  .app-icon{
-    width: 10px;
-    height: 10px;
-    opacity: 1;
-    display: inline-block;
-    background-color: #333333;
-    margin-right: 4px;
-  }
-  

package/components/SmsPreviewV2/index.js

@@ -1,69 +0,0 @@
-/**
-*
-* SmsPreviewV2
-*
-*/
-
-import React from 'react';
-// import styled from 'styled-components';
-
-import { FormattedMessage } from 'react-intl';
-import messages from './messages';
-import {CapColumn, CapRow, CapHeading} from '@capillarytech/cap-ui-library';
-import androidPhoneImage from '../../assets/android-message-gui-2.svg';
-
-class SmsPreviewV2 extends React.Component { // eslint-disable-line react/prefer-stateless-function
-  render() {
-    let content = [this.props.content];
-    const channel = this.props.channel;
-    let smsDetails = {};
-    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") && this.props.showCount) {
-        document.getElementById("msg_count").val = smsDetails.parts;
-      }
-    }
-    const type = this.props.location && this.props.location.query.type ? this.props.location.query.type : '';
-    return (
-      <CapRow>
-        {this.props.showCount && <CapColumn span={16}>
-          {channel && channel.toLowerCase() === 'sms' && <CapHeading type="h3">
-            <FormattedMessage {...messages.charactersTotal} values={{smsCount: smsDetails.parts, charCount: smsDetails.chars_used}}/>
-            {smsDetails.unicode &&
-              <FormattedMessage {...messages.smsFormatType}/>
-            }
-          </CapHeading>}
-        </CapColumn>}
-        <CapColumn span={this.props.showCount ? 8 : 24}>
-          <div className={`preview-container ${type === 'embedded' ? 'embedded-preview' : ''}`}>
-            { channel && channel.toLowerCase() === 'sms' &&
-              <div className="shell align-center" id="sms-preview">
-                <img className="preview-image sms" src={smsBody} alt="Preview is being generated"/>
-                <div className="msgContainer sms">
-                  <img className="sms-icon" src={smsIcon} alt="Sms icon" />
-                  <div className={"message-pop sms"}>
-                    {content && content.length && content.map((msg, index) =>
-                      <CapColumn key={`"message-pop-content-${index}`} className="message-pop-item align-left" style={{ background: '#3F51B5', color: '#ffffff'}}>
-                        {msg}
-                      </CapColumn>)
-                }
-                  </div>
-                </div>
-              </div>
-            }
-          </div>
-        </CapColumn>
-      </CapRow>
-    );
-  }
-}
-
-SmsPreviewV2.propTypes = {
-
-};
-
-export default SmsPreviewV2;

package/components/SmsPreviewV2/messages.js

@@ -1,13 +0,0 @@
-/*
- * SmsPreviewV2 Messages
- *
- * This contains all the text for the SmsPreviewV2 component.
- */
-import { defineMessages } from 'react-intl';
-
-export default defineMessages({
-  header: {
-    id: 'app.components.SmsPreviewV2.header',
-    defaultMessage: 'This is the SmsPreviewV2 component !',
-  },
-});

package/components/SmsPreviewV2/tests/index.test.js

@@ -1,10 +0,0 @@
-// import React from 'react';
-// import { shallow } from 'enzyme';
-
-// import SmsPreviewV2 from '../index';
-
-describe('<SmsPreviewV2 />', () => {
-  it('Expect to have unit tests specified', () => {
-    expect(true).toEqual(false);
-  });
-});