@capillarytech/creatives-library 6.7.1 → 6.8.0

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

@@ -0,0 +1,68 @@
+import React from 'react';
+import get from 'lodash/get';
+import CapImage from '@capillarytech/cap-ui-library/CapImage';
+import CapButton from '@capillarytech/cap-ui-library/CapButton';
+import CapColumn from '@capillarytech/cap-ui-library/CapColumn';
+
+export const groupLineStickers = (lineStickers) => {
+  const stickerGroup = {};
+  lineStickers.forEach((lineSticker) => {
+    const packageId = get(lineSticker, 'definition.packageId');
+    if (packageId) {
+      const stickerGroupPackageId = stickerGroup[packageId];
+      if (stickerGroupPackageId && Array.isArray(stickerGroupPackageId)) {
+        stickerGroup[packageId].push(lineSticker);
+      } else {
+        stickerGroup[packageId] = [];
+      }
+    }
+  });
+  return stickerGroup;
+}
+
+export const getContent = ({ lineStickers, onStickerSelect }) => (
+  <>
+    {
+      lineStickers.map(({
+        _id,
+        definition = {},
+      }) => (
+          <CapColumn span={6} key={_id}>
+            <CapButton
+              type="flat"
+              style={{ padding: 0, margin: 10, height: 'auto' }}
+              onClick={() => onStickerSelect(definition)}
+            >
+              <CapImage
+                src={definition.stickerUrl}
+                rest={{ height: 70 }}
+                rest={{
+                  height: 70,
+                  onMouseOut: e => (e.currentTarget.src = definition.stickerUrl),
+                  onMouseOver: e => (e.currentTarget.src = definition.animatedStickerUrl || definition.stickerUrl)
+                }}
+              />
+            </CapButton>
+          </CapColumn>
+        ))
+    }
+  </>
+);
+
+export const getTabPanes = ({ lineStickers, onStickerSelect }) => {
+  const groupedStickers = groupLineStickers(lineStickers);
+  const tableKeys = Object.keys(groupedStickers);
+  return tableKeys.map((packageId) => {
+    const stickerUrl = get(groupedStickers[packageId], '[0].definition.stickerUrl', '');
+    return {
+      key: packageId,
+      tab: (
+        <CapImage
+            src={stickerUrl}
+            rest={{ height: 33 }}
+        />
+      ),
+      content: getContent({ lineStickers: groupedStickers[packageId], onStickerSelect }),
+    }
+  });
+};

package/v2Containers/Line/Container/Text/index.js

@@ -0,0 +1,338 @@
+import React, { useState, useEffect } from 'react';
+import { injectIntl, FormattedMessage } from 'react-intl';
+import get from 'lodash/get';
+import CapInput from '@capillarytech/cap-ui-library/CapInput';
+import CapLabel from '@capillarytech/cap-ui-library/CapLabel';
+import CapButton from '@capillarytech/cap-ui-library/CapButton';
+import CapHeading from '@capillarytech/cap-ui-library/CapHeading';
+import CapDrawer from '@capillarytech/cap-ui-library/CapDrawer';
+import CapCustomCard from '@capillarytech/cap-ui-library/CapCustomCard';
+import CapHeader from '@capillarytech/cap-ui-library/CapHeader';
+import { CAP_SPACE_12, CAP_SPACE_08, FONT_COLOR_05, FONT_COLOR_04 } from '@capillarytech/cap-ui-library/styled/variables';
+import TagList from '../../../TagList';
+import LineDrawer from '../Drawer';
+import messages from './messages';
+import style from './style';
+import withStyles from '../../../../hoc/withStyles';
+
+const { TextArea } = CapInput;
+const {CapCustomCardList} = CapCustomCard;
+
+
+const charLimit = 1600;
+
+export const LineText = ({
+    className,
+    id,
+    intl: { formatMessage },
+    isFullMode,
+    tags,
+    injectedTags,
+    inheritedTitleStyle,
+    inheritedContentStyle,
+    getDefaultTags,
+    globalActions,
+    location,
+    index,
+    updateMessageState,
+    content,
+    activeKey,
+    Templates,
+    getAllTemplates,
+}) => {
+    if (activeKey !== 'text') {
+        return null;
+    }
+
+    const [errorMessageTextarea, updateErrorMessageTextArea] = useState(false);
+    const [isCreateNew, updateCreateNew] = useState(isFullMode);
+    const [errorMessageTitle, updateErrorMessageTitle] = useState(false);
+    const [messageContent, updateTextMessageContent] = useState('');
+    const [messageTitle, updateTextMessageTitle] = useState('');
+    const [isDrawerRequired, updateDrawerRequirement] = useState(false);
+    const [selectedTemplate, updateSelectedTemplate] = useState();
+
+    useEffect(() => {
+        const { messageTitle = '', messageContent = '', type, isInit } = content;
+        if (type === 'text') {
+            if (messageContent) {
+                updateCreateNew(true);
+                updateTextMessageContent(messageContent);
+                updateTextMessageTitle(messageTitle);
+            }
+            if (isInit) {
+                updateCreateNew(isFullMode);
+                updateTextMessageContent('');
+                updateTextMessageTitle('');
+            }
+        }
+    }, [content]);
+
+    useEffect(() => {
+        if (messageContent && (isFullMode ? messageTitle : true)) {
+            updateMessageState({
+                isError: (messageContent.length > charLimit) || (!messageContent || !(isFullMode ? messageTitle : true) || (errorMessageTextarea && errorMessageTitle)),
+                messageContent,
+                messageTitle,
+                index,
+                type: 'text',
+                messageType: 'text',
+            });
+        }
+    }, [errorMessageTitle, messageContent, messageTitle, errorMessageTextarea]);
+
+    useEffect(() => {
+        const getTagsQuery = {
+          layout: 'LINE',
+          type: 'TAG',
+          context:
+            location.query.type === 'embedded'
+              ? 'outbound'
+              : 'default',
+          embedded:
+            location.query.type === 'embedded'
+              ? location.query.type
+              : 'full',
+        };
+        if (getDefaultTags) {
+          getTagsQuery.context = getDefaultTags;
+        }
+        globalActions.fetchSchemaForEntity(getTagsQuery);
+    }, []);
+
+    const handleOnTagsContextChange = (data) => {
+        const query = {
+        layout: 'LINE',
+        type: 'TAG',
+        context:
+            (data || '').toLowerCase() === 'all' ? 'default' : (data || '').toLowerCase(),
+        embedded:
+            location.query.type === 'embedded'
+            ? location.query.type
+            : 'full',
+        };
+        globalActions.fetchSchemaForEntity(query);
+    };
+
+    const updateTextContentError = (value) => {
+        let errorMessage = false;
+        if (value === '') {
+            errorMessage = formatMessage(messages.emptyTitleErrorMessage);
+        } else if (value.length > charLimit) {
+            errorMessage = formatMessage(messages.limitExceededContentErrorMessage);
+        }
+        updateErrorMessageTextArea(errorMessage);
+    }
+
+    const onTextContentChange = ({ target: { value } }) => {
+        updateTextMessageContent(value);
+        updateTextContentError(value);
+        updateMessageState({
+            isError: (value.length > charLimit) || (!value || !(isFullMode ? messageTitle : true) || (!value && errorMessageTitle)),
+            messageContent: value,
+            messageTitle,
+            index,
+            type: 'text',
+            messageType: 'text',
+        });
+    }
+
+    const updateTextTitleError = (value) => {
+        let errorMessage = false;
+        if (value === '') {
+            errorMessage = formatMessage(messages.emptyTitleErrorMessage);
+        }
+        updateErrorMessageTitle(errorMessage);
+    }
+
+    const onTextTitleChange = ({ target: { value } }) => {
+        updateTextMessageTitle(value);
+        updateTextTitleError(value);
+        updateMessageState({
+            isError: (messageContent.length > charLimit) || (!messageContent || !(isFullMode ? value : true) || (!value && errorMessageTextarea)),
+            messageContent,
+            messageTitle: value,
+            index,
+            type: 'text',
+            messageType: 'text',
+        });
+    }
+
+    const onTagSelect = (data) => updateTextMessageContent(`${messageContent}{{${data}}}`);
+
+    const setNewContent = () => updateCreateNew(true);
+
+    const onSelectTemplate = (event) => {
+        event.stopPropagation();
+        updateDrawerRequirement(true);
+    }
+
+    const getLineTextSection = () => {
+        if (!isCreateNew) {
+            return (
+                <div className="form-builder-dragger" style={{
+                    textAlign: 'center',
+                    border: '2px dashed lightgrey',
+                    minHeight: 120,
+                    padding: 60
+                }}>
+                <CapHeader
+                    className="choice-title"
+                    size="regular"
+                    title={formatMessage(messages.textMessageAddLabel)}
+                    style={{ marginBottom: 12 }}
+                />
+                
+                <CapButton
+                    className="create-button"
+                    type="secondary"
+                    style={{marginRight: CAP_SPACE_08}}
+                    onClick={setNewContent}
+                >
+                    <FormattedMessage {...messages.textMessageCreateNew} />
+                </CapButton>
+
+                <CapHeading className="" type="label6" style={{ display: 'inline-block' }}>
+                    <FormattedMessage {...messages.textMessageORLabel} />
+                </CapHeading>
+
+                <CapButton
+                    className="dragger-button"
+                    type="secondary"
+                    style={{marginLeft: CAP_SPACE_08}}
+                    onClick={onSelectTemplate}
+                >
+                    <FormattedMessage {...messages.textMessageSelectTemplate} />
+                </CapButton>
+            </div>);
+        }
+        return (
+            <>
+                <TextArea
+                    id={`${id}_textarea`}
+                    placeholder={formatMessage(messages.textMessagePlaceholder)}
+                    className={`${errorMessageTextarea ? 'error' : ''}`}
+                    errorMessage={errorMessageTextarea}
+                    label={(
+                        <>
+                            <FormattedMessage {...messages.textMessage} />
+                            <CapLabel type="label2" className="word-count">
+                                <FormattedMessage {...messages.charCount} />
+                                {(messageContent || '').length}/{charLimit}
+                            </CapLabel>
+                        </>
+                    )}
+                    autosize={false}
+                    onChange={onTextContentChange}
+                    style={inheritedContentStyle || {}}
+                    className="text-template-content"
+                    defaultValue={messageContent || ''}
+                    value={messageContent || ''}
+                    rows={5}
+                    cols={2}
+                />
+                <TagList
+                    key={`${id}_tags`}
+                    moduleFilterEnabled={location && location.query && location.query.type !== 'embedded'}
+                    label={formatMessage(messages.addLabels)}
+                    onTagSelect={onTagSelect}
+                    onContextChange={handleOnTagsContextChange}
+                    location={location}
+                    tags={tags || []}
+                    injectedTags={injectedTags || {}}
+                    // className={val.className ? val.className : ''}
+                    id={`${id}_tags`}
+                    userLocale={localStorage.getItem('jlocale') || 'en'}
+                />
+            </>
+        );
+    }
+
+    const onTemplateSelection = (template) => {
+        const content = get(template, 'versions.base.content.messages[0].text', '');
+        updateSelectedTemplate(template);
+        updateTextMessageContent(content);
+        updateErrorMessageTextArea(!content);
+        updateDrawerRequirement(false);
+        updateCreateNew(true);
+    }
+
+    const getLineTextDrawerContent = () => {
+        const lineTextTemplates = Templates.templates;
+        if (!lineTextTemplates) {
+            return null;
+        }
+
+        const cardDataList = [];
+        lineTextTemplates.forEach(template => {
+            let templateData = {};
+            const {
+                content: {
+                messages: [{
+                    text = '',
+                }] = [{}],
+                } = {},
+            } = template.versions.base;
+            templateData.content = text;
+            templateData.title = template.name;
+            templateData.key = template.name;
+            templateData.hoverOption = (
+                <CapButton onClick={() => onTemplateSelection(template)}>
+                    <FormattedMessage {...messages.select} />
+                </CapButton>
+            );
+            if (text) {
+                cardDataList.push(templateData);
+            }
+        });
+        return (
+        <>
+            <CapHeading type="h3" className="drawer-head">
+                {formatMessage(messages.lineTemplateText)}
+            </CapHeading>
+            <LineDrawer
+                getAllTemplates={getAllTemplates}
+                cardDataList={cardDataList}
+                isDrawer={isDrawerRequired}
+                className="drawer-head"
+                searchPlaceholder={formatMessage(messages.searchText)}
+            />
+        </>
+        );
+    };
+
+    return (
+        <div className={className}>
+            {
+                isFullMode
+                ? (
+                    <CapInput
+                        id={`${id}_input`}
+                        onChange={onTextTitleChange}
+                        errorMessage={errorMessageTitle}
+                        className="text-template-title"
+                        style={inheritedTitleStyle || {}}
+                        placeholder={formatMessage(messages.textMessageTitlePlaceholder)}
+                        defaultValue={messageTitle || ''}
+                        value={messageTitle || ''}
+                        size="default"
+                        label={formatMessage(messages.textMessageTitleLabel)}
+                    />
+                )
+                : null
+            }
+            {
+                getLineTextSection()
+            }
+            <CapDrawer
+                content={getLineTextDrawerContent()}
+                visible={isDrawerRequired}
+                width={624}
+                onClose={() => updateDrawerRequirement(false)}
+            />
+        </div>
+    )
+}
+
+
+export default injectIntl(withStyles(LineText, style));

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

@@ -0,0 +1,74 @@
+/*
+ * LineText Messages
+ *
+ * This contains all the text for the LineText component.
+ */
+import { defineMessages } from 'react-intl';
+const scope = `creatives.containersV2.LineText`;
+
+export default defineMessages({
+  "textMessageAddLabel": {
+    id: `${scope}.textMessageAddLabel`,
+    defaultMessage: 'How do you want to add the text message?',
+  },
+  "textMessageCreateNew": {
+    id: `${scope}.textMessageCreateNew`,
+    defaultMessage: 'Create new',
+  },
+  "textMessageSelectTemplate": {
+    id: `${scope}.textMessageSelectTemplate`,
+    defaultMessage: 'Select template',
+  },
+  "textMessageORLabel": {
+    id: `${scope}.textMessageORLabel`,
+    defaultMessage: 'OR',
+  },
+  "textMessagePlaceholder": {
+    id: `${scope}.textMessagePlaceholder`,
+    defaultMessage: 'Enter text message',
+  },
+  "textMessageTitlePlaceholder": {
+    id: `${scope}.textMessageTitlePlaceholder`,
+    defaultMessage: 'Enter template name',
+  },
+  "textMessage": {
+    id: `${scope}.textMessage`,
+    defaultMessage: 'Text message',
+  },
+  "charCount": {
+    id: `${scope}.charCount`,
+    defaultMessage: 'Characters count:',
+  },
+  "addLabels": {
+    id: `${scope}.addLabels`,
+    defaultMessage: 'Add labels',
+  },
+  "emptyTitleErrorMessage": {
+    id: `${scope}.emptyTitleErrorMessage`,
+    defaultMessage: 'Template title can not be empty',
+  },
+  "emptyContentErrorMessage": {
+    id: `${scope}.emptyContentErrorMessage`,
+    defaultMessage: 'Template content can not be empty',
+  },
+  "limitExceededContentErrorMessage": {
+    id: `${scope}.limitExceededContentErrorMessage`,
+    defaultMessage: 'Template content can not be more than 1600',
+  },
+  "textMessageTitleLabel": {
+    id: `${scope}.textMessageTitleLabel`,
+    defaultMessage: 'Template name',
+  },
+  "lineTemplateText": {
+    id: `${scope}.lineTemplateText`,
+    defaultMessage: 'Line templates - Text',
+  },
+  "select": {
+    id: `${scope}.select`,
+    defaultMessage: 'Select',
+  },
+  "searchText": {
+    id: `${scope}.searchText`,
+    defaultMessage: 'Search Text',
+  },
+});

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

@@ -0,0 +1,37 @@
+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_24,
+  FONT_COLOR_02,
+} from '@capillarytech/cap-ui-library/styled/variables';
+
+export default css`
+    position: relative;
+    padding: 0 ${CAP_SPACE_16} ${CAP_SPACE_16};
+
+
+    .text-template-content {
+        margin-bottom: 10px;
+    }
+
+    .word-count {
+        display: inline-block;
+        float: right;
+    }
+
+    .choice-title {
+        margin-bottom: ${CAP_SPACE_24};
+        color: ${FONT_COLOR_02};
+    }
+
+`;
+

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

@@ -0,0 +1,152 @@
+import React, { useState, useEffect } from 'react';
+import { injectIntl, FormattedMessage } from 'react-intl';
+import CapTab from '@capillarytech/cap-ui-library/CapTab';
+import CapButton from '@capillarytech/cap-ui-library/CapButton';
+import CapIcon from '@capillarytech/cap-ui-library/CapIcon';
+import CapModal from '@capillarytech/cap-ui-library/CapModal';
+import style, { CapModalStyles } from './style';
+import withStyles from '../../../../hoc/withStyles';
+import { TEXT, IMAGE, IMAGE_MAP, STICKER, MAX_LINE_WRAPPER_LIMIT, MAX_LINE_WRAPPER_LIMIT_FULL_MODE  } from '../constants';
+import { getTabPanes } from './utils';
+import messages from './messages';
+import { CAP_SPACE_16, CAP_SPACE_08 } from '@capillarytech/cap-ui-library/styled/variables';
+
+const StyledCapModal = withStyles(CapModal, CapModalStyles);
+
+export const LineWrapper = ({
+    className,
+    index,
+    deleteWrapper,
+    selectedType,
+    shiftUp,
+    shiftDown,
+    lineWrappers,
+    intl,
+    ...rest
+}) => {
+
+    const [activeKey, updateActiveKey] = useState(TEXT);
+    const [selectedKey, updateSelectedKey] = useState(TEXT);
+    const [isConfirmModalVisible, togglePopup] = useState(false);
+
+    useEffect(() => {
+        updateActiveKey(selectedType);
+    }, [selectedType]);
+
+    const onTabChange = (type) => {
+        const { content = {} } = rest;
+        const {
+            originalContentUrl,
+            previewImageUrl,
+            stickerUrl,
+            animatedStickerUrl,
+            selectedSticker,
+            stickerId,
+            packageId,
+            messageContent,
+            messageTitle,
+            baseUrl,
+            selectedTemplate
+        } = content;
+
+        const isTouched  = (
+            originalContentUrl
+            || previewImageUrl
+            || stickerUrl
+            || animatedStickerUrl
+            || selectedSticker
+            || stickerId
+            || packageId
+            || messageTitle
+            || messageContent
+            || baseUrl
+            || selectedTemplate
+        );
+        if (!isTouched) {
+            updateActiveKey(type);
+            rest.updateMessageState({
+                isError: true,
+                index,
+                type,
+            });
+        } else {
+            togglePopup(true);
+            updateSelectedKey(type);
+            updateActiveKey(activeKey);
+        }
+    }
+
+    const saveChangesOnLeave = () => {
+        updateActiveKey(selectedKey);
+        rest.updateMessageState({
+            isError: true,
+            index,
+            type: selectedKey,
+        });
+        togglePopup(false);
+    }
+
+    const discardChangesOnLeave = () => {
+        updateActiveKey(activeKey);
+        togglePopup(false);
+    }
+
+    const operations = (
+        <>
+            <CapButton
+                type="flat"
+                onClick={() => shiftUp(index)}
+                disabled={index === 0 || rest.isFullMode}
+                style={{ padding: 0 }}
+            >
+                <CapIcon type="back" size="s" style={{ transform: 'rotate(90deg)'}}/>
+            </CapButton>
+            <CapButton
+                type="flat"
+                onClick={() => shiftDown(index)}
+                style={{ padding: `0 0 0 ${CAP_SPACE_08}` }}
+                disabled={(index+1) === lineWrappers || rest.isFullMode}
+            >
+                <CapIcon type="back" size="s"  style={{ transform: 'rotate(270deg)'}}/>
+            </CapButton>
+            <CapButton
+                type="flat"
+                onClick={() => deleteWrapper(index)}
+                disabled={rest.isFullMode || lineWrappers === 1}
+                style={{ padding: `0 ${CAP_SPACE_16} 0 ${CAP_SPACE_16}`, marginRight: -20 }}
+            >
+                <CapIcon type="close" size="s"/>
+            </CapButton>
+        </>
+    );
+
+    return (
+        <div className={className}>
+            <CapTab
+                defaultActiveKey={TEXT}
+                activeKey={activeKey}
+                tabBarExtraContent={operations}
+                onChange={onTabChange}
+                panes={getTabPanes({ ...rest, index, activeKey, formatMessage: intl.formatMessage })}
+            />
+            <StyledCapModal
+                title={intl.formatMessage(messages.changeModalTitle)}
+                visible={isConfirmModalVisible}
+                onOk={saveChangesOnLeave}
+                onCancel={discardChangesOnLeave}
+                centered
+                okText={intl.formatMessage(messages.modalSaveChangesButtonLabel)}
+                cancelText={intl.formatMessage(messages.modalDiscardChangesButtonLabel)}
+                closeText={intl.formatMessage(messages.modalDiscardChangesButtonLabel)}
+                width="450px"
+            >
+                <FormattedMessage {...messages.changeModalDescription} />
+                <div className="modal-description">
+                    <FormattedMessage {...messages.changeModalLabel} />
+                </div>
+            </StyledCapModal>
+        </div>
+    )
+}
+
+export default injectIntl(withStyles(LineWrapper, style));