@capillarytech/creatives-library 6.7.1 → 6.8.0

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

@@ -0,0 +1,126 @@
+/*
+ * LineImage Messages
+ *
+ * This contains all the text for the LineImage component.
+ */
+import { defineMessages } from 'react-intl';
+const scope = `creatives.containersV2.LineImageMap`;
+
+export default defineMessages({
+  "textMessageSelectTemplate": {
+    id: `${scope}.textMessageSelectTemplate`,
+    defaultMessage: 'Select template',
+  },
+  "textMessageORLabel": {
+    id: `${scope}.textMessageORLabel`,
+    defaultMessage: 'OR',
+  },
+  "textMessageTitlePlaceholder": {
+    id: `${scope}.textMessageTitlePlaceholder`,
+    defaultMessage: 'Enter template name',
+  },
+  "textMessageTitleLabel": {
+    id: `${scope}.textMessageTitleLabel`,
+    defaultMessage: 'Template name',
+  },
+  "emptyTitleErrorMessage": {
+    id: `${scope}.emptyTitleErrorMessage`,
+    defaultMessage: 'Template title can not be empty',
+  },
+  "imageDimenstionDescription": {
+    id: `${scope}.imageDimenstionDescription`,
+    defaultMessage: 'Dimensions: {dimensions} Size: Up to 10MB',
+  },
+  "imageReUpload": {
+    id: `${scope}.imageReUpload`,
+    defaultMessage: 'Re upload',
+  },
+  "uploadGallery": {
+    id: `${scope}.uploadGallery`,
+    defaultMessage: 'Gallery',
+  },
+  "uploadComputer": {
+    id: `${scope}.uploadComputer`,
+    defaultMessage: 'Your computer',
+  },
+  "or": {
+    id: `${scope}.or`,
+    defaultMessage: 'OR',
+  },
+  "dragAndDrop": {
+    id: `${scope}.dragAndDrop`,
+    defaultMessage: 'Drag and drop image here',
+  },
+  "lineImageMapIncorrectSize": {
+    id: `${scope}.lineImageMapIncorrectSize`,
+    defaultMessage: 'Please upload the image with correct type, size and dimension',
+  },
+  "imageGallery": {
+    id: `${scope}.imageGallery`,
+    defaultMessage: 'Gallery',
+  },
+  "uploadImageLabel": {
+    id: `${scope}.uploadImageLabel`,
+    defaultMessage: 'Upload Image',
+  },
+  "selectTemplateDesc": {
+    id: `${scope}.selectTemplateDesc`,
+    defaultMessage: 'Select a template and upload an image to preview your message',
+  },
+  "linkDescription": {
+    id: `${scope}.linkDescription`,
+    defaultMessage: 'Add URL link/s to different parts of uploaded image.'
+  },
+  "linkUrl": {
+    id: `${scope}.linkUrl`,
+    defaultMessage: 'Link URL'
+  },
+  "validUrl": {
+    id: `${scope}.validUrl`,
+    defaultMessage: 'Please enter a valid URL'
+  },
+  "richMsgHeader": {
+    id: `${scope}.richMsgHeader`,
+    defaultMessage: 'Rich message'
+  },
+  "richMsgDesc": {
+    id: `${scope}.richMsgDesc`,
+    defaultMessage: "Use this to send out interactive content featuring images you've selected."
+  },
+  "uploadImageDesc": {
+    id: `${scope}.uploadImageDesc`,
+    defaultMessage: "The relevant image that complements the message context."
+  },
+  "linkUrl": {
+    id: `${scope}.linkUrl`,
+    defaultMessage: "Enter URL link"
+  },
+  "squareAssetDesc": {
+    id: `${scope}.squareAssetDesc`,
+    defaultMessage: "Supported image sizes are 1040 × 1040 px for square templates."
+  },
+  "customAssetDesc": {
+    id: `${scope}.customAssetDesc`,
+    defaultMessage: "Supported image sizes are 1040 × 520–2080 px for custom templates."
+  },
+  "textMessageAddLabel": {
+    id: `${scope}.textMessageAddLabel`,
+    defaultMessage: 'How do you want to upload the image map?',
+  },
+  "textMessageCreateNew": {
+    id: `${scope}.textMessageCreateNew`,
+    defaultMessage: 'Create new',
+  },
+  "lineTemplateImageMap": {
+    id: `${scope}.lineTemplateImageMap`,
+    defaultMessage: 'Line templates - ImageMap',
+  },
+  "searchImageMaps": {
+    id: `${scope}.searchImageMaps`,
+    defaultMessage: 'Search ImageMaps',
+  },
+  "select": {
+    id: `${scope}.select`,
+    defaultMessage: 'Select',
+  },
+});

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

@@ -0,0 +1,94 @@
+import { css } from 'styled-components';
+import {
+  CAP_SPACE_40,
+  CAP_SPACE_28,
+  CAP_SPACE_24,
+  CAP_SPACE_20,
+  CAP_SPACE_12,
+  CAP_SPACE_08,
+  CAP_SPACE_04,
+  CAP_G06,
+  CAP_G10,
+  FONT_COLOR_02,
+  CAP_SPACE_16,
+  FONT_SIZE_VS,
+  FONT_WEIGHT_REGULAR
+} from '@capillarytech/cap-ui-library/styled/variables';
+
+export default css`
+  padding: 0 ${CAP_SPACE_16} ${CAP_SPACE_16};
+  position: relative;
+
+  .image-template-title {
+    margin-bottom: 10px;
+  }
+
+  .image-container {
+    background-color: ${CAP_G06};
+    margin-top: ${CAP_SPACE_20};
+  }
+  .imagemap-container {
+    padding-top: ${CAP_SPACE_24};
+    .imagemap-preview-container {
+      position: relative;
+      width: 122px;
+      height: 122px;
+      border: 1px ${CAP_G06} dashed;
+      border-radius: ${CAP_SPACE_04};
+      font-size: ${FONT_SIZE_VS};
+      color: ${FONT_COLOR_02};
+      .select-template-desc {
+        width: 100px;
+        height: 33px;
+        margin: auto;
+        padding-top: ${CAP_SPACE_40};
+      }
+      .template-preview {
+        position: absolute;
+        width: 122px;
+        height: 122px;
+        left: -1px;
+        top: -1px;
+        z-index: 1;
+      }
+      .image-preview {
+        left: -1px;
+        position: absolute;
+        top: -1px;
+        opacity: 30%;
+        width: 122px;
+        height: 122px;
+      }
+    }
+    .select-template {
+      padding: 0px;
+      width: 122px;
+      margin-top: ${CAP_SPACE_12};
+    }
+    .ant-upload-disabled {
+      background-color: ${CAP_G10}
+    }
+    .base-image-preview {
+      width: 152px;
+      position: relative;
+      left: 100px;
+      border-radius: ${CAP_SPACE_04};
+    }
+    .cap-icon-v2-avatar  {
+      .text-label {
+        right: 56%;
+        font-weight: ${FONT_WEIGHT_REGULAR};
+      }
+      svg {
+        border-radius: ${CAP_SPACE_28};
+      }
+    }
+    .template-links {
+      padding-top: ${CAP_SPACE_08};
+      .ant-input-affix-wrapper {
+        width: 150%;
+      }
+    }
+  }
+`;
+

package/v2Containers/Line/Container/ImageMap/templates.json

@@ -0,0 +1,195 @@
+{
+    "templateOne" : [
+        {
+            "label": "A",
+            "x": 0,
+            "y": 0,
+            "width": 1040,
+            "height": 1040
+        }
+    ],
+    "templateTwo" : [
+        {
+            "label": "A",
+            "x": 0,
+            "y": 0,
+            "width": 520,
+            "height": 1040
+        },
+        {
+            "label": "B",
+            "x": 520,
+            "y": 0,
+            "width": 520,
+            "height": 1040
+        }
+    ],
+    "templateThree" : [
+        {
+            "label": "A",
+            "x": 0,
+            "y": 0,
+            "width": 1040,
+            "height": 520
+        },
+        {
+            "label": "B",
+            "x": 0,
+            "y": 520,
+            "width": 1040,
+            "height": 520
+        }
+    ],
+    "templateFour" : [
+        {
+            "label": "A",
+            "x": 0,
+            "y": 0,
+            "width": 520,
+            "height": 346
+        },
+        {
+            "label": "B",
+            "x": 0,
+            "y": 346,
+            "width": 520,
+            "height": 346
+        },
+        {
+            "label": "C",
+            "x": 0,
+            "y": 692,
+            "width": 520,
+            "height": 346
+        }
+    ],
+    "templateFive" : [
+        {
+            "label": "A",
+            "x": 0,
+            "y": 0,
+            "width": 520,
+            "height": 520
+        },
+        {
+            "label": "B",
+            "x": 520,
+            "y": 0,
+            "width": 520,
+            "height": 520
+        },
+        {
+            "label": "C",
+            "x": 0,
+            "y": 520,
+            "width": 520,
+            "height": 520
+        },
+        {
+            "label": "D",
+            "x": 520,
+            "y": 520,
+            "width": 520,
+            "height": 520
+        }
+    ],
+    "templateSix" : [
+        {
+            "label": "A",
+            "x": 0,
+            "y": 0,
+            "width": 1040,
+            "height": 520
+        },
+        {
+            "label": "B",
+            "x": 0,
+            "y": 520,
+            "width": 520,
+            "height": 520
+        },
+        {
+            "label": "C",
+            "x": 520,
+            "y": 520,
+            "width": 520,
+            "height": 520
+        }
+    ],
+    "templateSeven" : [
+        {
+            "label": "A",
+            "x": 0,
+            "y": 0,
+            "width": 520,
+            "height": 520
+        },
+        {
+            "label": "B",
+            "x": 0,
+            "y": 520,
+            "width": 520,
+            "height": 260
+        },
+        {
+            "label": "C",
+            "x": 0,
+            "y": 580,
+            "width": 520,
+            "height": 260
+        }
+    ],
+    "templateEight" : [
+        {
+            "label": "A",
+            "x": 0,
+            "y": 0,
+            "width": 346,
+            "height": 520
+        },
+        {
+            "label": "B",
+            "x": 346,
+            "y": 0,
+            "width": 346,
+            "height": 520
+        },
+        {
+            "label": "C",
+            "x": 692,
+            "y": 0,
+            "width": 346,
+            "height": 520
+        },
+        {
+           "label": "D",
+            "x": 0,
+            "y": 520,
+            "width": 346,
+            "height": 520
+        },
+        {
+            "label": "E",
+            "x": 346,
+            "y": 520,
+            "width": 346,
+            "height": 520
+        },
+        {
+            "label": "F",
+            "x": 692,
+            "y": 520,
+            "width": 346,
+            "height": 520
+        }
+    ],
+    "custom" : [
+        {
+            "label": "A",
+            "x": 0,
+            "y": 0,
+            "width": 346,
+            "height": 520
+        }
+    ]
+}

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

@@ -0,0 +1,224 @@
+import React,  { useState, useEffect } from 'react';
+import { injectIntl, FormattedMessage } from 'react-intl';
+import get from 'lodash/get';
+import CapButton from '@capillarytech/cap-ui-library/CapButton';
+import CapDrawer from '@capillarytech/cap-ui-library/CapDrawer';
+import CapInput from '@capillarytech/cap-ui-library/CapInput';
+import CapHeading from '@capillarytech/cap-ui-library/CapHeading';
+import CapImage from '@capillarytech/cap-ui-library/CapImage';
+import CapTab from '@capillarytech/cap-ui-library/CapTab';
+import CapIcon from '@capillarytech/cap-ui-library/CapIcon';
+import { FONT_COLOR_05 } from '@capillarytech/cap-ui-library/styled/variables';
+
+import style from './style';
+import withStyles from '../../../../hoc/withStyles';
+import messages from './messages';
+
+import { getTabPanes } from './utils';
+
+export const LineSticker = ({
+    actions,
+    Line,
+    className,
+    id,
+    intl: { formatMessage },
+    inheritedTitleStyle,
+    isFullMode,
+    updateMessageState,
+    index,
+    activeKey,
+    content,
+}) => {
+    if (activeKey !== 'sticker') {
+        return null;
+    }
+
+    const [lineStickers, updateStickerList] = useState([]);
+    const [messageTitle, updateTextMessageTitle] = useState('');
+    const [errorMessageTitle, updateErrorMessageTitle] = useState(false);
+    const [isStickerDrawerOpen, toggleStickerDrawer] = useState(false);
+    const [selectedSticker, updateSelectedStickerDetails] = useState();
+
+    useEffect(() => {
+        actions.getLineStickers();
+    }, []);
+
+    useEffect(() => {
+        const { messageTitle = '', selectedSticker = {}, type } = content;
+        if (selectedSticker.stickerUrl && type === 'sticker') {
+            updateTextMessageTitle(messageTitle);
+            updateSelectedStickerDetails(selectedSticker);
+        }
+    }, [content]);
+
+    useEffect(() => {
+        updateStickerList(get(Line, 'lineStickers.response.metaEntities', []));
+    }, [Line]);
+
+    useEffect(() => {
+        if (selectedSticker && (isFullMode ? messageTitle : true)) {
+            updateMessageState({
+                isError: !selectedSticker || !(isFullMode ? messageTitle : true) || errorMessageTitle,
+                selectedSticker,
+                messageTitle,
+                index,
+                type: 'sticker',
+                messageType: 'selectedSticker',
+            });
+        }
+    }, [errorMessageTitle, selectedSticker, messageTitle]);
+
+    const updateTextTitleError = (value) => {
+        let errorMessage = false;
+        if (value === '') {
+            errorMessage = formatMessage(messages.emptyTitleErrorMessage);
+            updateMessageState({
+                isError: true,
+                selectedSticker,
+                messageTitle: '',
+                index,
+                type: 'sticker',
+                messageType: 'selectedSticker',
+            });
+        }
+        updateErrorMessageTitle(errorMessage);
+    }
+
+    const onTextTitleChange = ({ target: { value } }) => {
+        updateTextMessageTitle(value);
+        updateTextTitleError(value);
+    }
+
+    const removeSelectedSticker = () => {
+        updateSelectedStickerDetails();
+        updateMessageState({
+            isError: true,
+            selectedSticker: undefined,
+            messageTitle,
+            index,
+            type: 'sticker',
+            messageType: 'selectedSticker',
+        });
+    }
+
+    const getLineStickerSection = () => {
+        if  (selectedSticker) {
+            return (
+                <>
+                    <CapImage
+                        src={selectedSticker.stickerUrl}
+                        rest={{
+                            height: 70,
+                            onMouseOut: e => (e.currentTarget.src = selectedSticker.stickerUrl),
+                            onMouseOver: e => (e.currentTarget.src = selectedSticker.animatedStickerUrl ||  selectedSticker.stickerUrl),
+                        }}
+                    />
+                    <CapButton
+                        type="flat"
+                        style={{ padding: 0, top: -34, right: 8 }}
+                        onClick={removeSelectedSticker}
+                    >
+                        <CapIcon type="close-circle" size="s" theme="filled" />
+                    </CapButton>
+                </>
+            );
+        }
+        return (
+            <CapButton
+                onClick={() => toggleStickerDrawer(true)}
+                type="secondary"
+            >
+                <FormattedMessage {...messages.selectStickersLabels} />
+            </CapButton>
+        );
+    }
+
+    const onStickerSelect = (definition) => {
+        updateSelectedStickerDetails(definition);
+        updateMessageState({
+            isError: !definition || !(isFullMode ? messageTitle : true) || errorMessageTitle,
+            selectedSticker: definition,
+            messageTitle,
+            index,
+            type: 'sticker',
+            messageType: 'selectedSticker',
+        });
+        toggleStickerDrawer(false);
+    }
+
+    const getStickerSection = () => {
+        return (
+            <CapTab 
+                panes={getTabPanes({ lineStickers, onStickerSelect })}
+            />
+        )
+    }
+
+    const getStickerDrawerContent = () => {
+        return (
+            <>
+                <CapHeading type="h3">
+                    {formatMessage(messages.stickerDrawerTitle)}
+                </CapHeading>
+                {getStickerSection()}
+            </>
+        );
+    }
+
+    return (
+        <div className={className}>
+            {
+                isFullMode
+                ? (
+                    <CapInput
+                        id={`${id}_input`}
+                        onChange={onTextTitleChange}
+                        errorMessage={errorMessageTitle}
+                        className="sticker-template-title"
+                        style={inheritedTitleStyle || {}}
+                        placeholder={formatMessage(messages.textMessageTitlePlaceholder)}
+                        defaultValue={messageTitle || ''}
+                        value={messageTitle || ''}
+                        size="default"
+                        label={formatMessage(messages.textMessageTitleLabel)}
+                    />
+                )
+                : null
+            }
+            <CapHeading type="h3" className="sticker-label">
+                <FormattedMessage {...messages.stickerDrawerTitle} />
+                {
+                    selectedSticker
+                    ? (
+                        <CapButton
+                            onClick={removeSelectedSticker}
+                            type="flat"
+                            style={{
+                                padding: 0,
+                                marginLeft: 400,
+                                color: FONT_COLOR_05,
+                                height: 'auto',
+                            }}
+                        >
+                            <FormattedMessage {...messages.changeStickerButtonLabel} />
+                        </CapButton>
+                    )
+                    : null
+                }
+            </CapHeading>
+            <div className="sticker-content">
+                {
+                    getLineStickerSection()
+                }
+            </div>
+            <CapDrawer
+                content={getStickerDrawerContent()}
+                visible={isStickerDrawerOpen}
+                width={430}
+                onClose={() => toggleStickerDrawer(false)}
+            />
+        </div>
+    )
+}
+
+export default injectIntl(withStyles(LineSticker, style));

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

@@ -0,0 +1,34 @@
+/*
+ * LineSticker Messages
+ *
+ * This contains all the text for the LineSticker component.
+ */
+import { defineMessages } from 'react-intl';
+const scope = `creatives.containersV2.LineSticker`;
+
+export default defineMessages({
+  "emptyTitleErrorMessage": {
+    id: `${scope}.emptyTitleErrorMessage`,
+    defaultMessage: 'Template title can not be empty',
+  },
+  "textMessageTitlePlaceholder": {
+    id: `${scope}.textMessageTitlePlaceholder`,
+    defaultMessage: 'Enter template name',
+  },
+  "textMessageTitleLabel": {
+    id: `${scope}.textMessageTitleLabel`,
+    defaultMessage: 'Template name',
+  },
+  "selectStickersLabels": {
+    id: `${scope}.selectStickersLabels`,
+    defaultMessage: 'Select stickers',
+  },
+  "stickerDrawerTitle": {
+    id: `${scope}.stickerDrawerTitle`,
+    defaultMessage: 'Sticker',
+  },
+  "changeStickerButtonLabel": {
+    id: `${scope}.changeStickerButtonLabel`,
+    defaultMessage: 'Change sticker',
+  },
+});

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

@@ -0,0 +1,36 @@
+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_SECONDARY,
+} from '@capillarytech/cap-ui-library/styled/variables';
+
+export default css`
+  padding: 0 ${CAP_SPACE_16} ${CAP_SPACE_16};
+
+  .cap-image-v2 {
+    max-height: 70px;
+  }
+
+  .sticker-label {
+    margin-top: 10px;
+    margin-bottom: 4px;
+  }
+
+  .sticker-content {
+    border: 1px solid ${CAP_G06};
+    min-height: 180px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+`;
+