@capillarytech/creatives-library 6.7.1 → 6.8.0

package/v2Containers/Line/Container/Wrapper/messages.js

@@ -0,0 +1,46 @@
+/*
+ * LineWrapper Messages
+ *
+ * This contains all the text for the LineWrapper component.
+ */
+import { defineMessages } from 'react-intl';
+const scope = `creatives.containersV2.LineWrapper`;
+
+export default defineMessages({
+  "changeModalTitle": {
+    id: `${scope}.changeModalTitle`,
+    defaultMessage: 'Changing content tab?',
+  },
+  "changeModalDescription": {
+    id: `${scope}.changeModalDescription`,
+    defaultMessage: 'The already added content for this card will be lost by changing the content tab.',
+  },
+  "changeModalLabel": {
+    id: `${scope}.changeModalLabel`,
+    defaultMessage: 'Do you still want to make the changes to content tab',
+  },
+  "modalSaveChangesButtonLabel": {
+    id: `${scope}.modalSaveChangesButtonLabel`,
+    defaultMessage: 'Yes, change',
+  },
+  "modalDiscardChangesButtonLabel": {
+    id: `${scope}.modalDiscardChangesButtonLabel`,
+    defaultMessage: 'No',
+  },
+  "stickerLabel": {
+    id: `${scope}.stickerLabel`,
+    defaultMessage: 'Sticker',
+  },
+  "textLabel": {
+    id: `${scope}.textLabel`,
+    defaultMessage: 'Text',
+  },
+  "imageLabel": {
+    id: `${scope}.imageLabel`,
+    defaultMessage: 'Image',
+  },
+  "imagemapLabel": {
+    id: `${scope}.imagemapLabel`,
+    defaultMessage: 'Image Map',
+  },
+});

package/v2Containers/Line/Container/Wrapper/style.js

@@ -0,0 +1,44 @@
+import { css } from 'styled-components';
+import {
+  CAP_SPACE_44,
+  CAP_SPACE_28,
+  CAP_SPACE_20,
+  CAP_SPACE_12,
+  CAP_SPACE_08,
+  CAP_G07,
+  CAP_G12,
+  CAP_G06,
+  FONT_COLOR_05,
+  CAP_SPACE_16,
+  CAP_SPACE_40,
+  FONT_WEIGHT_MEDIUM,
+  CAP_SPACE_24,
+} from '@capillarytech/cap-ui-library/styled/variables';
+
+export default css`
+    max-width: 600px;
+    border-radius: 6px;
+    border: 1px solid ${CAP_G07};
+    margin: 10px 0 14px;
+
+    .ant-tabs-bar {
+        padding: 0 ${CAP_SPACE_24};
+    }
+`;
+
+export const CapModalStyles = css`
+  .ant-modal.cap-modal-v2 {
+    max-width: unset;
+  }
+
+  .modal-description {
+    margin-top: ${CAP_SPACE_12};
+  }
+
+  .ant-modal.cap-modal-v2 .ant-modal-footer {
+    padding-bottom: ${CAP_SPACE_20};
+    padding-left: ${CAP_SPACE_24};
+  }
+`;
+
+

package/v2Containers/Line/Container/Wrapper/utils.js

@@ -0,0 +1,67 @@
+import React from 'react';
+import CapIcon from '@capillarytech/cap-ui-library/CapIcon';
+import CapTooltip from '@capillarytech/cap-ui-library/CapTooltip';
+import { CAP_WHITE } from '@capillarytech/cap-ui-library/styled/variables';
+
+import { TEXT, IMAGE, IMAGE_MAP, STICKER } from '../constants';
+import LineText from '../Text';
+import LineImage from '../Image';
+import LineSticker from '../Sticker';
+import LineImageMap from '../ImageMap';
+import messages from './messages';
+
+export const getTabContent = ({ item, props }) => {
+  switch (item) {
+    case TEXT: {
+      return <LineText {...props} />;
+    }
+    case IMAGE: {
+      return <LineImage {...props} />;
+    }
+    case STICKER: {
+      return <LineSticker {...props} />;
+    }
+    case IMAGE_MAP: {
+      return <LineImageMap {...props} />;
+    }
+  }
+};
+
+export const itemIcons = {
+  [TEXT]: 'chat-bubble',
+  [IMAGE]: 'picture',
+  [STICKER]: 'smile',
+  [IMAGE_MAP]: 'add-media', // to change
+};
+
+
+export const getTabPanes = (props) => {
+  const tableKeys = [TEXT, IMAGE, STICKER, IMAGE_MAP];
+  return tableKeys.map((item) => {
+    const isSelected = props.activeKey === item;
+    return {
+      key: item,
+      tab: (
+        <CapTooltip
+          title={props.formatMessage(messages[`${item}Label`])}
+        >
+          <CapIcon
+            type={itemIcons[item]}
+            size="s"
+            theme={isSelected ? 'filled' : ''}
+            svgProps={{
+              fill: isSelected ? '#000' : CAP_WHITE,
+              stroke: isSelected ? CAP_WHITE : '#000',
+            }}
+          />
+        </CapTooltip>
+      ),
+      content: getTabContent({ item, props }),
+    }
+  });
+};
+
+export const isUrl = (url) => {
+  const res = url.match(/(http(s)?:\/\/.)(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/g);
+  return res;
+}

package/v2Containers/Line/Container/_lineCreate.scss

@@ -0,0 +1,108 @@
+@import '~@capillarytech/cap-ui-library/styles/_variables.scss';
+
+.line-row{
+  margin-bottom: 16px;
+}
+.slidebox-content-container {
+  overflow-x: hidden;
+}
+.line-image {
+  position: relative;
+}
+.knSUjl .component-wrapper .cap-tab-v2.ant-tabs-line {
+  height: auto;
+}
+.pagination-container {
+  .LINE {
+    .ant-card-body {
+      background-color: $CAP_G09;
+      height: 320px;
+    }
+  
+    &.no-image .ant-card-meta {
+      height: 276px;
+      background: $CAP_WHITE;
+      padding: $CAP_SPACE_16 $CAP_SPACE_12;
+  
+      .ant-card-meta-description {
+        height: 250px;
+        word-wrap: break-word;
+      }
+    }
+  }
+}
+.create-msg,
+.cancel-msg {
+  position: fixed;
+  bottom: 20px;
+}
+.cancel-msg {
+  margin-left: 120px;
+}
+
+.image-container {
+  display: flex;
+  & > div {
+    min-width: 516px;
+  }
+  border-radius: 5px;
+  .image-placeholder{
+    line-height: 150px;
+  }
+  img {
+    object-fit: cover;
+    max-width: 100%;
+    max-height: 100%;
+    height: auto !important;
+    width: auto !important;
+  }
+}
+
+.drawer-head {
+  padding-bottom: $CAP_SPACE_16;
+  padding-left: $CAP_SPACE_24;
+  border-bottom: 1px solid rgba(9, 30, 66, 0.25);
+  margin-bottom: $CAP_SPACE_16;
+  margin-left: -24px;
+  min-width: 624px;
+}
+
+.search-text {
+  margin-bottom: $CAP_SPACE_12;
+}
+
+.pagination-container.gallery-upload {
+  height: calc(100vh - 60px);
+
+  .cap-custom-card-list-col {
+    max-width: 156px;
+    max-height: 156px;
+    display: inline-block;
+    margin-left: $CAP_SPACE_04;
+    margin-right: $CAP_SPACE_04;
+  }
+
+  .ant-card-body {
+    padding-top: 0;
+
+    .ant-card-meta-description img {
+      height: 80px;
+      width: auto;
+    }
+  }
+}
+
+.gallery-image {
+  height: 156px;
+  width: 156px;
+  border-radius: 4px;
+  margin: 3px;
+}
+
+.sms-text {
+  img {
+    display: block;
+    max-width: 100%;
+    object-fit: cover;
+  }
+}

package/v2Containers/Line/Container/actions.js

@@ -0,0 +1,99 @@
+/*
+ *
+ * Create actions
+ *
+ */
+
+import * as types from './constants';
+
+export function createTemplate(template, callback) {
+  console.log('action trigereed createtemplate');
+  return {
+    type: types.CREATE_TEMPLATE_REQUEST,
+    template,
+    callback,
+  };
+}
+
+export function clearCreateResponse() {
+  console.log('clearCreateResponse');
+  return {
+    type: types.CLEAR_CREATE_RESPONSE_REQUEST,
+  };
+}
+
+export function defaultAction() {
+  return {
+    type: types.DEFAULT_ACTION,
+  };
+}
+
+export function uploadAsset(file, assetType, fileParams) {
+  return {
+    type: types.UPLOAD_ASSET_REQUEST,
+    file,
+    assetType,
+    fileParams,
+  };
+}
+
+export function clearAsset() {
+  return {
+    type: types.CLEAR_ASSET,
+  };
+}
+
+
+// FOR EDIT
+
+
+export function editTemplate(template, callback) {
+  console.log('action trigereed editTemplate line @@@');
+  return {
+    type: types.EDIT_TEMPLATE_REQUEST,
+    template,
+    callback,
+  };
+}
+
+export function getTemplateDetails(id, callback) {
+  console.log('getting template line @@@', id);
+  return {
+    type: types.GET_TEMPLATE_DETAILS_REQUEST,
+    id,
+    channel: 'LINE',
+    callback,
+  };
+}
+
+export function clearEditResponse() {
+  console.log('clearEditResponse');
+  return {
+    type: types.CLEAR_EDIT_RESPONSE_REQUEST,
+  };
+}
+
+export function clearData() {
+  return {
+    type: types.CLEAR_DATA,
+  };
+}
+
+export function getLineTemplatesList(channel, queryParams) {
+  return {
+    type: types.GET_LINE_TEMPLATES_LIST_REQUEST,
+    channel,
+    queryParams,
+  };
+}
+
+export function setSelectedTemplate(templateData) {
+  return {
+    type: types.SET_SELECTED_TEMPLATE,
+    data: templateData,
+  };
+}
+
+export const getLineStickers = () => ({
+  type: types.GET_STICKER_REQUEST,
+})

package/v2Containers/Line/Container/constants.js

@@ -0,0 +1,48 @@
+export const TEXT = 'text';
+export const STICKER = 'sticker';
+export const IMAGE = 'image';
+export const IMAGE_MAP = 'imagemap';
+export const MAX_LINE_WRAPPER_LIMIT = 5;
+export const MAX_LINE_WRAPPER_LIMIT_FULL_MODE = 1;
+
+/*
+ *
+ * Create constants
+ *
+ */
+
+export const DEFAULT_ACTION = 'app/Create/DEFAULT_ACTION';
+
+
+export const CREATE_TEMPLATE_REQUEST = 'app/v2Containers/LineContainer/Create/CREATE_TEMPLATE_REQUEST';
+export const CREATE_TEMPLATE_SUCCESS = 'app/v2Containers/LineContainer/Create/CREATE_TEMPLATE_SUCCESS';
+export const CREATE_TEMPLATE_FAILURE = 'app/v2Containers/LineContainer/Create/CREATE_TEMPLATE_FAILURE';
+export const UPLOAD_ASSET_REQUEST = 'app/v2Containers/LineContainer/Create/UPLOAD_ASSET_REQUEST';
+export const UPLOAD_ASSET_SUCCESS = 'app/v2Containers/LineContainer/Create/UPLOAD_ASSET_SUCCESS';
+export const UPLOAD_ASSET_FAILURE = 'app/v2Containers/LineContainer/Create/UPLOAD_ASSET_FAILURE';
+export const CLEAR_ASSET = 'app/v2Containers/LineContainer/Create/CLEAR_ASSET';
+
+export const CLEAR_CREATE_RESPONSE_REQUEST = 'app/v2Containers/LineContainer/Create/CLEAR_CREATE_RESPONSE_REQUEST';
+export const CLEAR_CREATE_RESPONSE_SUCCESS = 'app/v2Containers/LineContainer/Create/CLEAR_CREATE_RESPONSE_SUCCESS';
+export const CLEAR_CREATE_RESPONSE_FAILURE = 'app/v2Containers/LineContainer/Create/CLEAR_CREATE_RESPONSE_FAILURE';
+
+// edit
+
+export const GET_TEMPLATE_DETAILS_REQUEST = 'app/v2Containers/line/Edit/GET_TEMPLATE_DETAILS_REQUEST';
+export const GET_TEMPLATE_DETAILS_SUCCESS = 'app/v2Containers/line/Edit/GET_TEMPLATE_DETAILS_SUCCESS';
+export const GET_TEMPLATE_DETAILS_FAILURE = 'app/v2Containers/line/Edit/GET_TEMPLATE_DETAILS_FAILURE';
+
+export const EDIT_TEMPLATE_REQUEST = 'app/v2Containers/line/Edit/EDIT_TEMPLATE_REQUEST';
+export const EDIT_TEMPLATE_SUCCESS = 'app/v2Containers/line/Edit/EDIT_TEMPLATE_SUCCESS';
+export const EDIT_TEMPLATE_FAILURE = 'app/v2Containers/line/Edit/EDIT_TEMPLATE_FAILURE';
+
+export const CLEAR_EDIT_RESPONSE_REQUEST = 'app/v2Containers/line/Edit/CLEAR_EDIT_RESPONSE_REQUEST';
+export const CLEAR_DATA = 'app/v2Containers/LineContainer/Edit/CLEAR_DATA';
+export const SET_SELECTED_TEMPLATE = 'app/v2Containers/LineContainer/Edit/SET_SELECTED_TEMPLATE';
+
+export const GET_LINE_TEMPLATES_LIST_REQUEST = 'app/v2Containers/LineContainer/GET_LINE_TEMPLATES_LIST_REQUEST';
+export const GET_LINE_TEMPLATES_LIST_SUCCESS = 'app/v2Containers/LineContainer/GET_LINE_TEMPLATES_LIST_SUCCESS';
+export const GET_LINE_TEMPLATES_LIST_FAILURE = 'app/v2Containers/LineContainer/GET_LINE_TEMPLATES_LIST_FAILURE';
+
+export const GET_STICKER_REQUEST = 'app/v2Containers/LineContainer/GET_STICKER_REQUEST';
+export const GET_STICKER_RESPONSE = 'app/v2Containers/LineContainer/GET_STICKER_RESPONSE';