@capillarytech/creatives-library 6.7.0 → 6.8.0

package/v2Containers/Line/Container/index.js

@@ -0,0 +1,581 @@
+import React, { useState, useEffect } from 'react';
+import { bindActionCreators } from 'redux';
+import { injectIntl, intlShape, FormattedMessage  } from 'react-intl';
+import { createStructuredSelector } from 'reselect';
+import get from 'lodash/get';
+import isEmpty from 'lodash/isEmpty';
+import style from './style';
+import withStyles from '../../../hoc/withStyles';
+import './_lineCreate.scss';
+
+import CapButton from '@capillarytech/cap-ui-library/CapButton';
+import CapNotification from '@capillarytech/cap-ui-library/CapNotification';
+import CapSpin from '@capillarytech/cap-ui-library/CapSpin';
+import CapRow from '@capillarytech/cap-ui-library/CapRow';
+import CapColumn from '@capillarytech/cap-ui-library/CapColumn';
+import CapRadioCard from '@capillarytech/cap-ui-library/CapRadioCard';
+import CapIcon from '@capillarytech/cap-ui-library/CapIcon';
+import CapHeader from '@capillarytech/cap-ui-library/CapHeader';
+import LineWrapper from './Wrapper';
+import messages from './messages';
+import { TEXT, IMAGE, IMAGE_MAP, STICKER, MAX_LINE_WRAPPER_LIMIT, MAX_LINE_WRAPPER_LIMIT_FULL_MODE  } from './constants';
+import { FONT_COLOR_05 } from '@capillarytech/cap-ui-library/styled/variables';
+
+import { makeSelectMetaEntities, setInjectedTags } from '../../Cap/selectors';
+import { makeSelectTemplates } from '../../Templates/selectors';
+import TemplatePreview from '../../../v2Components/TemplatePreview';
+import {makeSelectCreateLine, makeSelectLine } from './selectors';
+import * as compActions from './actions';
+import * as templateActionsConfig from '../../Templates/actions';
+import withCreatives from '../../../hoc/withCreatives';
+
+
+
+export const LineContainer = ({
+    isFullMode,
+    globalActions,
+    metaEntities,
+    injectedTags = {},
+    getDefaultTags,
+    location,
+    supportedTags,
+    actions,
+    Line,
+    className,
+    params,
+    onCreateComplete,
+    intl: { formatMessage },
+    getFormSubscriptionData,
+    templateData,
+    lineData,
+    isCreateFlow,
+    templateActions,
+    Templates,
+    createNew,
+    onShowTemplates,
+    handleClose,
+    additionalProperties
+}) => {
+    const paramObj = params || {};
+    const initialWrapperContent = [{ type: TEXT, isError: true, isInit: true }];
+    const [lineWrapperContents, updateLineWrapperContent] = useState(initialWrapperContent);
+    const [isEditFlow, checkEditFlow] = useState(false);
+    const [isEditLoading, updateEditLoading] = useState(false);
+    const [accountSelectFlow, updateAccountSelectFlow] = useState(false);
+    const [selectedAccount, updateSelectedAccount] = useState('');
+
+    useEffect(() => {
+        if  (!isFullMode) {
+            templateActions.getWeCrmAccounts('Line');
+            updateAccountSelectFlow(true);
+            const queryParams = {"sortBy":"Most Recent","page":1,"perPage":25};
+            templateActions.getAllTemplates('Line', queryParams);
+        }
+    }, []);
+
+    const onAccountSelect = (account) => {
+        const { value } = account.target;
+        templateActions.setLineAccount(Templates.weCrmAccounts.find((item) => item.name === value));
+        updateSelectedAccount(value);
+        updateAccountSelectFlow(false);
+        createNew();
+    }
+
+    useEffect(() => {
+        const { id } = paramObj;
+        if (id) {
+            updateEditLoading(true);
+            actions.getTemplateDetails(id, updateEditLoading);
+            checkEditFlow(true);
+        }
+    }, [paramObj.id]);
+
+    useEffect(() => {
+        if (params && params.id) {
+            const type = get(Line, 'templateDetails.mode');
+            const messageContent = get(Line, `templateDetails.versions.base.content.messages.0.text`);
+            const originalContentUrl = get(Line, `templateDetails.versions.base.content.messages.0.originalContentUrl`);
+            const previewImageUrl = get(Line, `templateDetails.versions.base.content.messages.0.previewImageUrl`);
+            const stickerUrl = get(Line, `templateDetails.versions.base.content.messages.0.stickerUrl`);
+            const animatedStickerUrl = get(Line, `templateDetails.versions.base.content.messages.0.animatedStickerUrl`);
+            const stickerId = get(Line, `templateDetails.versions.base.content.messages.0.stickerId`);
+            const packageId = get(Line, `templateDetails.versions.base.content.messages.0.packageId`);
+            const messageTitle = get(Line, 'templateDetails.name');
+            const baseUrl = get(Line, `templateDetails.versions.base.content.messages.0.baseUrl`);
+            const baseSize = get(Line, `templateDetails.versions.base.content.messages.0.baseSize`);
+            const selectedTemplate = get(Line, 'templateDetails.selectedTemplate');
+            const assetType = get(Line, 'templateDetails.assetType');
+            const actionLinks = get(Line, 'templateDetails.actionLinks');
+            const lineContent = {
+                type,
+                messageContent,
+                originalContentUrl,
+                previewImageUrl,
+                messageTitle,
+                selectedSticker: {
+                    stickerUrl,
+                    animatedStickerUrl,
+                    stickerId: `${stickerId}`,
+                    packageId: `${packageId}`,
+                },
+                selectedTemplate,
+                assetType,
+                baseUrl,
+                actionLinks,
+                baseSize,
+            };
+            updateLineWrapperContent([lineContent]);
+        }
+    }, [Line.templateDetails]);
+
+    useEffect(() => {
+        if (templateData && templateData.versions) {
+            const lineMessages = get(templateData, 'versions.base.content.messages', [{}]);
+            const lineContent = [];
+            lineMessages.forEach(({
+                type = 'text',
+                text,
+                originalContentUrl,
+                previewImageUrl,
+                stickerUrl,
+                animatedStickerUrl,
+                selectedSticker,
+                stickerId,
+                packageId,
+                baseUrl,
+                baseSize,
+                actionLinks,
+                assetType,
+                selectedTemplate
+            }) => {
+                const obj = {
+                    type,
+                    messageContent: text,
+                    originalContentUrl,
+                    previewImageUrl,
+                    selectedSticker,
+                    baseUrl,
+                    baseSize,
+                    actionLinks,
+                    assetType,
+                    selectedTemplate
+                };
+                if (stickerUrl) {
+                    obj.selectedSticker = {
+                        stickerUrl,
+                        animatedStickerUrl,
+                        stickerId: `${stickerId}`,
+                        packageId: `${packageId}`,
+                    };
+                }
+                lineContent.push(obj);
+            });
+            updateLineWrapperContent(lineContent);
+        }
+    }, [templateData]);
+
+    const addLineWrappers = () => {
+        updateLineWrapperContent([...lineWrapperContents, ...initialWrapperContent])
+    }
+
+    const deleteWrapper = index => {
+        const selectedIndex = lineWrapperContents.findIndex((el, i) => i === index);
+        if (selectedIndex > -1) {
+            const newLineWrapperContents = [...lineWrapperContents];
+            newLineWrapperContents.splice(selectedIndex, 1);
+            updateLineWrapperContent(newLineWrapperContents);
+        }
+    }
+
+    const shiftUp = index => {
+        const selectedIndex = lineWrapperContents.findIndex((el, i) => i === index);
+        const selectedElement = lineWrapperContents.find((el, i) => i === index);
+        if (selectedIndex > -1) {
+            const newLineWrapperContents = [...lineWrapperContents];
+            newLineWrapperContents.splice(selectedIndex, 1);
+            newLineWrapperContents.splice(selectedIndex - 1, 0, selectedElement);
+            updateLineWrapperContent(newLineWrapperContents);
+        }
+    }
+
+    const shiftDown = index => {
+        const selectedIndex = lineWrapperContents.findIndex((el, i) => i === index);
+        const selectedElement = lineWrapperContents.find((el, i) => i === index);
+        if (selectedIndex > -1) {
+            const newLineWrapperContents = [...lineWrapperContents];
+            newLineWrapperContents.splice(selectedIndex, 1);
+            newLineWrapperContents.splice(selectedIndex + 1, 0, selectedElement);
+            updateLineWrapperContent(newLineWrapperContents);
+        }
+    }
+
+    const updateMessageState = (obj) => {
+        const { index: selectedIndex, ...rest } = obj;
+        const newLineWrapperContents = [...lineWrapperContents];
+        newLineWrapperContents.splice(selectedIndex, 1, rest);
+        updateLineWrapperContent(newLineWrapperContents);
+    }
+
+    const isDoneDisabled = () => {
+        if (!lineWrapperContents.length) {
+            return true;
+        }
+        let isDisabled = false;
+        lineWrapperContents.forEach(({isError}) => {
+            isDisabled = isDisabled || isError;
+        });
+        return isDisabled;
+    }
+
+    const getLineWrappers = () => {
+        return lineWrapperContents.map((lineWrapperContent, index) => {
+            let tags =
+            metaEntities && metaEntities.tags
+                ? metaEntities.tags.standard
+                : [];
+            if (supportedTags) {
+                tags = supportedTags;
+            }
+
+            return (
+                <LineWrapper
+                    id={`${lineWrapperContent.type}__${index}`}
+                    globalActions={globalActions}
+                    tags={tags}
+                    injectedTags={injectedTags}
+                    getDefaultTags={getDefaultTags}
+                    isFullMode={isFullMode}
+                    location={location}
+                    actions={actions}
+                    Line={Line}
+                    index={index}
+                    deleteWrapper={deleteWrapper}
+                    updateMessageState={updateMessageState}
+                    content={lineWrapperContent}
+                    selectedType={lineWrapperContent.type}
+                    shiftUp={shiftUp}
+                    shiftDown={shiftDown}
+                    lineWrappers={lineWrapperContents.length}
+                    Templates={Templates}
+                    getAllTemplates={templateActions.getAllTemplates}
+                />
+            );
+        });
+    }
+
+    const createCallback = () => {
+        CapNotification.success({
+            message: formatMessage(messages.lineCreateNotification),
+        });
+        actions.clearEditResponse();
+    }
+
+    const editCallback = () => {
+        CapNotification.success({
+            message: formatMessage(messages.lineEditNotification),
+        });
+        actions.clearEditResponse();
+    }
+
+    const formatSubmitPayload = (lineWrapperContents) => {
+        const [ {
+            messageTitle,
+            messageContent,
+            type,
+            messageType,
+            previewImageUrl,
+            originalContentUrl,
+            selectedSticker,
+            baseUrl,
+            baseSize,
+            selectedTemplate,
+            assetType,
+            actionLinks
+        } = {}] = lineWrapperContents;
+        let messageData = { type };
+        messageData[messageType] = messageContent;
+        if (previewImageUrl) {
+            messageData.previewImageUrl = previewImageUrl;
+        }
+        if (originalContentUrl) {
+            messageData.originalContentUrl = originalContentUrl;
+        }
+        if (selectedSticker) {
+            messageData.stickerUrl = selectedSticker.stickerUrl;
+            messageData.animatedStickerUrl = selectedSticker.animatedStickerUrl;
+            messageData.packageId = `${selectedSticker.packageId}`;
+            messageData.stickerId = `${selectedSticker.stickerId}`;
+        }
+        if (baseUrl) {
+            messageData.baseUrl = baseUrl;
+            messageData.altText = IMAGE_MAP;
+        }
+        if (baseSize) {
+            messageData.baseSize = baseSize;
+        }
+        return {
+            versions: {
+                    base: {
+                    content: {
+                        to: "{{line_id}}",
+                        messages: [messageData]
+                    }
+                }
+            },
+            type: "LINE",
+            name: messageTitle,
+            definition: {
+                "mode": type,
+                selectedTemplate,
+                actionLinks,
+                assetType
+            }
+        };
+    }
+
+    const formatNonStandalonePayload = (lineWrapperContents) => {
+        const lineContents = lineWrapperContents.map(({
+            messageContent,
+            type,
+            messageType,
+            previewImageUrl,
+            originalContentUrl,
+            selectedSticker,
+            baseUrl,
+            baseSize,
+            selectedTemplate,
+            assetType,
+            actionLinks
+        }) => {
+            let messageData = { type };
+            messageData[messageType] = messageContent;
+            if (previewImageUrl) {
+                messageData.previewImageUrl = previewImageUrl;
+            }
+            if (originalContentUrl) {
+                messageData.originalContentUrl = originalContentUrl;
+            }
+            if (selectedSticker) {
+                messageData.stickerUrl = selectedSticker.stickerUrl;
+                messageData.animatedStickerUrl = selectedSticker.animatedStickerUrl;
+                messageData.stickerId = `${selectedSticker.stickerId}`;
+                messageData.packageId = `${selectedSticker.packageId}`;
+            }
+            if (baseUrl) {
+                messageData.baseUrl = baseUrl;
+                messageData.altText = IMAGE_MAP;
+                messageData.baseSize = baseSize;
+                messageData.selectedTemplate = selectedTemplate;
+                messageData.assetType = assetType;
+                messageData.actionLinks = actionLinks;
+            }
+            return messageData;
+        });
+        return ({
+            versions: {
+                base: {
+                    content: {
+                        messages: lineContents,
+                        to: "{{line_id}}",
+                    },
+                },
+            },
+        });
+    }
+
+    const onCreateLine = () => {
+        actions.createTemplate(
+            formatSubmitPayload(lineWrapperContents),
+            () => {
+              createCallback();
+              onCreateComplete();
+            }
+        );
+    }
+
+    const getPreviewSection = () => {
+        const accountName = get(lineData, 'selectedLineAccount.name', '');
+        const templateContent = lineWrapperContents.map(({ messageContent, type, previewImageUrl, selectedSticker, baseUrl }) => ({
+            messageContent,
+            previewImageUrl,
+            selectedSticker,
+            type,
+            baseUrl
+        }));
+
+        return (
+            <TemplatePreview
+                // style={val.customStyling ? val.customStyling : {}}
+                channel="LINE"
+                content={templateContent}
+                LineAccountName={accountName[0]}
+            />
+        )
+    }
+
+    const onEditLine = () => {
+        actions.editTemplate(
+            {
+                ...formatSubmitPayload(lineWrapperContents),
+                _id: params.id,
+            },
+            () => {
+                editCallback();
+                onCreateComplete();
+          });
+    }
+
+    const onDoneCallback = () => {
+        if (isFullMode) {
+            if (isEditFlow) {
+                return onEditLine;
+            }
+            return onCreateLine;
+        }
+        return () => getFormSubscriptionData({
+            value: formatNonStandalonePayload(lineWrapperContents),
+            _id: params && params.id,
+            validity: true,
+            type: 'LINE',
+        });
+    }
+
+    const isLoading = isEditLoading;
+
+    if (isCreateFlow && !isFullMode && accountSelectFlow) {
+        const {
+            weCrmAccounts,
+            fetchingWeCrmAccounts,
+        } = Templates;
+        if (isEmpty(weCrmAccounts) && !fetchingWeCrmAccounts) {
+            return <FormattedMessage {...messages.noAccountsPresentLine} />;
+        }
+        const accountOptions = (weCrmAccounts || [{}]).map(({
+            name = '',
+            uuid,
+        }) => ({
+            key: uuid,
+            value: name,
+            title: name,
+            icon: <CapIcon.CapIconAvatar text={name[0]} width="auto" height="2rem"/>,
+        }));
+        const accountHeader = formatMessage(messages.lineAccount);
+        return (
+            <CapSpin spinning={fetchingWeCrmAccounts}>
+                <CapHeader
+                    title={accountHeader}
+                    description={formatMessage(messages.chooseAccount)}
+                    size="regular"
+                    className="select-account-header"
+                />
+                <CapRadioCard
+                    className="select-account"
+                    onChange={onAccountSelect}
+                    panes={accountOptions}
+                    cardHeight="48px"
+                    cardWidth="276px"
+                    size="small"
+                    defaultValue={selectedAccount}
+                    selected={selectedAccount}
+                />
+            </CapSpin>
+        )
+    }
+
+    const getAccountSection = () => {
+        const accountName = get(lineData, 'selectedLineAccount.name', '');
+        if (createNew && !isFullMode) {
+            return (
+                <>
+                    <span>{accountName}</span>
+                    <CapButton
+                        onClick={onShowTemplates}
+                        type="flat"
+                        style={{ fontWeight: 500, color: FONT_COLOR_05 }}
+                    >
+                        <FormattedMessage {...messages.changeAccount} />
+                    </CapButton>
+                </>
+            )
+        }
+        return null;
+    }
+
+    return (
+        <div className={className}>
+            <CapSpin spinning={isLoading}>
+                <CapRow>
+                    <CapColumn span={14}>
+                        {getAccountSection()}
+                        <CapHeader
+                            title={formatMessage(messages.lineCreativeTitle)}
+                            description={formatMessage(messages.lineCreativeDescription)}
+                        />
+                        {getLineWrappers()}
+                        <CapButton
+                            onClick={addLineWrappers}
+                            disabled={lineWrapperContents.length === (isFullMode ? MAX_LINE_WRAPPER_LIMIT_FULL_MODE : MAX_LINE_WRAPPER_LIMIT)}
+                            type="flat"
+                            isAddBtn
+                            className="add-msg"
+                        >
+                            <FormattedMessage {...messages.addMessageButtonLabel} />
+                        </CapButton>
+                    </CapColumn>
+                    <CapColumn span={6}>
+                        <CapRow>
+                            <CapColumn span={23} offset={6}>
+                                {getPreviewSection()}
+                            </CapColumn>
+                        </CapRow>
+                    </CapColumn>
+                </CapRow>
+                <div className="action-section">
+                    <CapButton
+                        onClick={onDoneCallback()}
+                        disabled={isDoneDisabled()}
+                        className="create-msg"
+                    >
+                        <FormattedMessage {...messages.doneButtonLabel} />
+                    </CapButton>
+                    {
+                        !isFullMode
+                        ? (
+                            <CapButton
+                                onClick={handleClose}
+                                className="cancel-msg"
+                                type="secondary"
+                            >
+                                <FormattedMessage {...messages.cancelButtonLabel} />
+                            </CapButton>
+                        )
+                        : null
+                    }
+                </div>
+            </CapSpin>
+        </div>
+    )
+}
+
+const mapStateToProps = createStructuredSelector({
+  Line: makeSelectCreateLine(),
+  lineData: makeSelectLine(),
+  Templates: makeSelectTemplates(),
+  metaEntities: makeSelectMetaEntities(),
+  injectedTags: setInjectedTags(),
+});
+
+function mapDispatchToProps(dispatch) {
+  return {
+    actions: bindActionCreators(compActions, dispatch),
+    templateActions: bindActionCreators(templateActionsConfig, dispatch),
+  };
+}
+
+export default withCreatives({
+  WrappedComponent: injectIntl(withStyles(LineContainer, style)),
+  mapStateToProps,
+  mapDispatchToProps,
+  userAuth: true,
+});
+

package/v2Containers/Line/Container/messages.js

@@ -0,0 +1,66 @@
+/*
+ * LineContainer Messages
+ *
+ * This contains all the text for the LineContainer component.
+ */
+import { defineMessages } from 'react-intl';
+const scope = `creatives.containersV2.LineContainer`;
+
+export default defineMessages({
+  "lineAccountHeading": {
+    id: `${scope}.lineAccountHeading`,
+    defaultMessage: 'Line account',
+  },
+  "lineAccountHeadingChangeLabel": {
+    id: `${scope}.lineAccountHeadingChangeLabel`,
+    defaultMessage: 'Change',
+  },
+  "lineCreativeTitle": {
+    id: `${scope}.lineCreativeTitle`,
+    defaultMessage: 'Line creative',
+  },
+  "lineCreativeDescription": {
+    id: `${scope}.lineCreativeDescription`,
+    defaultMessage: 'Select any of the existing templates or create new',
+  },
+  "addMessageButtonLabel": {
+    id: `${scope}.addMessageButtonLabel`,
+    defaultMessage: 'Add message',
+  },
+  "doneButtonLabel": {
+    id: `${scope}.doneButtonLabel`,
+    defaultMessage: 'Done',
+  },
+  "cancelButtonLabel": {
+    id: `${scope}.cancelButtonLabel`,
+    defaultMessage: 'Cancel',
+  },
+  "lineCreateNotification": {
+    id: `${scope}.lineCreateNotification`,
+    defaultMessage: 'Line template created successfully',
+  },
+  "lineEditNotification": {
+    id: `${scope}.lineEditNotification`,
+    defaultMessage: 'Line template edited successfully',
+  },
+  "noAccountsPresentLine": {
+    id: `${scope}.noAccountsPresentLine`,
+    defaultMessage: "Line accounts are not setup for your brand",
+  },
+  "lineAccount": {
+    id: `${scope}.lineAccount`,
+    defaultMessage: 'Line account',
+  },
+  "chooseAccount": {
+    id: `${scope}.chooseAccount`,
+    defaultMessage: 'Choose the account to send content',
+  },
+  "changeAccount": {
+    id: `${scope}.changeAccount`,
+    defaultMessage: 'Change',
+  },
+  "cancelButtonLabel": {
+    id: `${scope}.cancelButtonLabel`,
+    defaultMessage: 'Cancel',
+  },
+});