@capillarytech/creatives-library 6.8.8 → 6.9.1

package/v2Containers/Line/Container/ImageCarousel/constants.js

@@ -1,10 +0,0 @@
-export const LINE_IMG_HEIGHT = 1024;
-export const LINE_IMG_WIDTH = 1024;
-export const LINE_IMG_SIZE = 1000000;
-export const ALLOWED_EXTENSIONS_REGEX = (/\.(jpeg|png)$/i);
-export const MAX_CAROUSEL_ALLOWED = 10;
-export const TEXT_ACTION_TYPE = 'text';
-export const MESSAGE_ACTION_TYPE = 'message';
-export const URL_ACTION_TYPE = 'uri';
-export const MAX_ACTION_LABEL_LENGTH = 12;
-export const MAX_ALLOWED_TITLE_LENGTH = 20;

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

@@ -1,526 +0,0 @@
-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 CapTab from '@capillarytech/cap-ui-library/CapTab';
-import CapHeading from '@capillarytech/cap-ui-library/CapHeading';
-import CapButton from '@capillarytech/cap-ui-library/CapButton';
-import CapIcon from '@capillarytech/cap-ui-library/CapIcon';
-import CapDrawer from '@capillarytech/cap-ui-library/CapDrawer';
-import CapHeader from '@capillarytech/cap-ui-library/CapHeader';
-import CapTooltip from '@capillarytech/cap-ui-library/CapTooltip';
-import CapTooltipWithInfo from '@capillarytech/cap-ui-library/CapTooltipWithInfo';
-import LineDrawer from '../Drawer';
-import style from './style';
-import { CAP_G06, FONT_COLOR_01, FONT_COLOR_02, CAP_SPACE_08, CAP_WHITE } from '@capillarytech/cap-ui-library/styled/variables';
-import withStyles from '../../../../hoc/withStyles';
-
-import LineImageCarouselContent from './Content';
-
-import messages from './messages';
-import {
-	MAX_CAROUSEL_ALLOWED,
-	TEXT_ACTION_TYPE,
-	MESSAGE_ACTION_TYPE,
-	URL_ACTION_TYPE,
-	MAX_ALLOWED_TITLE_LENGTH,
-} from './constants';
-
-export const LineImageCarousel = (props) => {
-
-	const {
-		className,
-		id,
-		intl: { formatMessage },
-		isFullMode,
-		inheritedTitleStyle,
-		Line,
-		index,
-		updateMessageState,
-		content,
-		activeKey,
-		Templates,
-		getAllTemplates,
-	} = props;
-
-	if (activeKey !== 'template') {
-		return null;
-	}
-
-	const defaultActiveIndex = 0;
-
-	const defaultCarouselContent = {
-		messageTitle: '',
-		originalContentUrl: '',
-		previewImageUrl: '',
-		type: 'image_carousel',
-	};
-
-	const [carouselImages, updateCarouselImage] = useState([defaultCarouselContent]);
-	const [activeIndex, updateActiveIndex] = useState(`${defaultActiveIndex}`);
-	const [errorMessageTitle, updateErrorMessageTitle] = useState(false);
-	const [messageTitle, updateTextMessageTitle] = useState('');
-	const [isTemplateDrawerRequired, updateTemplateDrawerRequirement] = useState(false);
-	const [isCreateNew, updateCreateNew] = useState(isFullMode);
-	const [selectedTemplate, updateSelectedTemplate] = useState();
-  const [altText, updateTitle] = useState('');
-	const [errorTitle, updateErrorTitle] = useState(false);
-
-	useEffect(() => {
-		const { messageTitle = '', type, template, altText } = content;
-		if (type === 'template') {
-			updateCreateNew(!isFullMode ? !!template : true);
-			if (messageTitle) {
-				updateTextMessageTitle(messageTitle);
-			}
-			if (altText) {
-				updateTitle(altText);
-			}
-			if (template) {
-				const { columns } = template;
-				if (columns && columns.length) {
-					const validCarouselImages = [];
-					columns.forEach((column = {}, index) => {
-						const {
-							action: {
-								label,
-								text,
-								type,
-								uri,
-							} = {},
-							imageUrl,
-						} = column;
-
-						validCarouselImages.push({
-							activeIndex: index,
-							originalContentUrl: imageUrl,
-							selectedActionType: type ? (type === MESSAGE_ACTION_TYPE ? TEXT_ACTION_TYPE : URL_ACTION_TYPE) : '',
-							actionContent: text || uri,
-							actionLabel: label,
-							type: 'image_carousel',
-						});
-					})
-					updateCarouselImage(validCarouselImages);
-				}
-			}
-		}
-	}, [content]);
-
-	const getFormattedCarouselMessagePayload = (newCarouselImages, inheritedMessageTitle, inheritedTitle) => {
-		const existingMessageTitle = inheritedMessageTitle !== undefined ? inheritedMessageTitle : messageTitle;
-		const existingTitle = inheritedTitle !== undefined ? inheritedTitle : altText;
-		let isErrorIndex;
-		const columns = [];
-		(newCarouselImages || carouselImages).forEach(({
-			originalContentUrl,
-			selectedActionType,
-			actionLabel,
-			actionContent,
-			actionContentErrorMessage,
-			actionLabelErrorMessage,
-			activeIndex,
-		}) => {
-			isErrorIndex = (isErrorIndex !== undefined)
-				? isErrorIndex
-				: ((!originalContentUrl || !selectedActionType || actionContentErrorMessage || actionLabelErrorMessage) && activeIndex);
-			columns.push({
-				imageUrl: originalContentUrl,
-				action: {
-					type: selectedActionType ? (selectedActionType === TEXT_ACTION_TYPE ? MESSAGE_ACTION_TYPE : URL_ACTION_TYPE) : '',
-					label: actionLabel,
-					[selectedActionType]: actionContent
-				}
-			});
-		});
-
-		const payload = {
-			isError: isErrorIndex !== undefined && isErrorIndex !== false,
-			messageTitle: existingMessageTitle,
-			altText: existingTitle,
-			type: 'template',
-			index,
-		}
-
-		if (columns.length) {
-			payload.template = {
-				columns,
-				type: 'image_carousel',
-			};
-		} else {
-			payload.isError = true;
-		}
-		payload.isError = payload.isError || (isFullMode ? !existingMessageTitle : false) || !existingTitle;
-		updateMessageState(payload);
-		return payload;
-	}
-
-	const updateCarouselMessageState = (config) => {
-		const newCarouselImages = [...carouselImages];
-		newCarouselImages.splice(config.activeIndex, 1, config);
-		updateCarouselImage(newCarouselImages);
-		getFormattedCarouselMessagePayload(newCarouselImages);
-	}
-
-	const addContent = () => {
-		const newCarouselImages = [
-			...carouselImages,
-			{
-				...defaultCarouselContent,
-				activeIndex: carouselImages.length,
-			},
-		]
-		updateCarouselImage(newCarouselImages);
-		getFormattedCarouselMessagePayload(newCarouselImages);
-	}
-
-	const duplicateContent = () => {
-		const contentToDuplicate = {
-			...carouselImages[activeIndex],
-			activeIndex: carouselImages.length,
-		};
-		const newCarouselImages = [
-			...carouselImages,
-			contentToDuplicate,
-		];
-		updateCarouselImage(newCarouselImages);
-		getFormattedCarouselMessagePayload(newCarouselImages);
-	}
-
-	const shiftRightContent = () => {
-		const newActiveIndex = Number(activeIndex) + 1;
-		updateActiveIndex(`${newActiveIndex}`);
-	}
-
-	const shiftLeftContent = () => {
-		const newActiveIndex = Number(activeIndex) - 1;
-		updateActiveIndex(`${newActiveIndex}`);
-	}
-
-	const deleteContent = () => {
-		const newCarouselImages = [...carouselImages];
-		newCarouselImages.splice(activeIndex, 1);
-		updateCarouselImage(newCarouselImages);
-		getFormattedCarouselMessagePayload(newCarouselImages);
-
-		const parsedActiveIndex = Number(activeIndex);
-		const newActiveIndex = parsedActiveIndex === 0 ? parsedActiveIndex : parsedActiveIndex - 1;
-		updateActiveIndex(`${newActiveIndex}`);
-	}
-
-	const onTabChange = (index) => {
-		updateActiveIndex(index);
-	}
-
-	const operations = (
-		<>
-			<CapButton
-				onClick={addContent}
-				type="flat"
-				disabled={MAX_CAROUSEL_ALLOWED === carouselImages.length}
-				isAddBtn
-				style={{ padding: 0, marginTop: 12 }}
-			>
-				<FormattedMessage {...messages.addCard} />
-			</CapButton>
-			<div
-				style={{
-					position: 'absolute',
-					top: 54,
-					right: 0,
-				}}
-				className="extra-button-group"
-			>
-				<CapTooltip 
-					title={<FormattedMessage {...messages.duplicateTooltipLabel} />}
-				>
-					<CapButton
-						onClick={duplicateContent}
-						disabled={MAX_CAROUSEL_ALLOWED === carouselImages.length}
-						type="flat"
-					>
-							<CapIcon type="copy" size="s" />
-					</CapButton>
-				</CapTooltip>
-				<CapTooltip 
-					title={<FormattedMessage {...messages.shiftLeftTooltipLabel} />}
-				>
-					<CapButton
-						onClick={shiftLeftContent}
-						disabled={defaultActiveIndex === Number(activeIndex)}
-						type="flat"
-					>
-						<CapIcon type="left" size="s" />
-					</CapButton>
-				</CapTooltip>
-				<CapTooltip 
-					title={<FormattedMessage {...messages.shiftRightTooltipLabel} />}
-				>
-					<CapButton
-						onClick={shiftRightContent}
-						disabled={carouselImages.length === (Number(activeIndex) + 1)}
-						type="flat"
-					>
-							<CapIcon type="right" size="s" />
-					</CapButton>
-				</CapTooltip>
-				<CapTooltip 
-					title={<FormattedMessage {...messages.deleteTooltipLabel} />}
-				>
-					<CapButton
-						onClick={deleteContent}
-						disabled={1 === carouselImages.length}
-						type="flat"
-					>
-							<CapIcon type="delete" size="s" />
-					</CapButton>
-				</CapTooltip>
-			</div>
-		</>
-	);
-
-	const getTabPanes = () => {
-		return carouselImages.map((carouselImage, index) => {
-			const isSelected = Number(activeIndex) === index;
-			return {
-				key: index,
-				tab: (
-					<span
-						style={{
-							display: 'inline-block',
-							borderRadius: '50%',
-							color: CAP_WHITE,
-							backgroundColor: !isSelected ? FONT_COLOR_02 : FONT_COLOR_01,
-							padding: '5px 10px',
-						}}
-					>
-						{index + 1}
-					</span>
-				),
-				content: (
-					<LineImageCarouselContent
-						{...props}
-						content={carouselImage}
-						activeIndex={index}
-						updateCarouselMessageState={updateCarouselMessageState}
-					/>
-				),
-			}
-		});
-	};
-
-	const onTextTitleChange = ({ target: { value } }) => {
-		updateTextMessageTitle(value);
-		let errorMessage = false;
-		if (value === '') {
-			errorMessage = formatMessage(messages.emptyTitleErrorMessage);
-		}
-		getFormattedCarouselMessagePayload(carouselImages, value);
-		updateErrorMessageTitle(errorMessage);
-	}
-
-	  const onTitleChange = ({ target: { value } }) => {
-    updateTitle(value);
-    let errorMessage;
-    if (value === '') {
-        errorMessage = formatMessage(messages.emptyAltTextErrorMessage);
-    }
-		updateErrorTitle(errorMessage);
-		getFormattedCarouselMessagePayload(carouselImages, undefined, value);
-	
-	}
-
-	const getLineImageDrawerContent = () => {
-		const lineTextTemplates = Templates.templates;
-		if (!lineTextTemplates) {
-			return null;
-		}
-
-		const cardDataList = [];
-		lineTextTemplates.forEach(template => {
-			let templateData = {};
-			const {
-				content: {
-					messages: [{
-						template: imageCarouselTemplate,
-					}] = [{}],
-				} = {},
-			} = template.versions.base;
-			templateData.url = (imageCarouselTemplate ? get(imageCarouselTemplate, 'columns.0.imageUrl', '') : '');
-			templateData.title = template.name;
-			templateData.key = template.name;
-			templateData.hoverOption = (
-				<CapButton onClick={() => onTemplateSelection(template)}>
-					<FormattedMessage {...messages.select} />
-				</CapButton>
-			);
-			if (imageCarouselTemplate) {
-				cardDataList.push(templateData);
-			}
-		});
-		return (
-			<>
-				<CapHeading type="h3" className="drawer-head">
-					{formatMessage(messages.lineTemplateImage)}
-				</CapHeading>
-				<LineDrawer
-					getAllTemplates={getAllTemplates}
-					cardDataList={cardDataList}
-					isDrawer={isTemplateDrawerRequired}
-					Templates={Templates}
-					searchPlaceholder={formatMessage(messages.searchImages)}
-				/>
-			</>
-		);
-	};
-
-	const onSelectTemplate = (event) => {
-		event.stopPropagation();
-		updateTemplateDrawerRequirement(true);
-	}
-
-	const onTemplateSelection = (templateData) => {
-		const template = get(templateData, 'versions.base.content.messages[0].template', {});
-		const altText = get(templateData, 'versions.base.content.messages[0].altText', '');
-		const { columns } = template;
-		if (columns && columns.length) {
-			const validCarouselImages = [];
-			columns.forEach((column = {}, index) => {
-				const {
-					action: {
-						label,
-						text,
-						type,
-						uri,
-					} = {},
-					imageUrl,
-				} = column;
-
-				validCarouselImages.push({
-					activeIndex: index,
-					originalContentUrl: imageUrl,
-					selectedActionType: type ? (type === MESSAGE_ACTION_TYPE ? TEXT_ACTION_TYPE : URL_ACTION_TYPE) : '',
-					actionContent: text || uri,
-					actionLabel: label,
-					type: 'image_carousel',
-				});
-			})
-			updateCarouselImage(validCarouselImages);
-		}
-		updateSelectedTemplate(template);
-		updateTitle(altText);
-		updateTemplateDrawerRequirement(false);
-		updateCreateNew(true);
-	}
-
-	const setNewContent = () => updateCreateNew(true);
-
-	const getTemplateSection = () => {
-		if (!isCreateNew) {
-			return (
-				<div className="form-builder-dragger" style={{
-					textAlign: 'center',
-					border: `1px dashed ${CAP_G06}`,
-					minHeight: 120,
-					padding: 60
-				}}>
-					<CapHeader
-						className="choice-title"
-						size="regular"
-						title={formatMessage(messages.textMessageAddLabel)}
-						style={{ marginBottom: 12 }}
-					/>
-
-					<CapButton
-						className="dragger-button create-button"
-						type="secondary"
-						style={{ marginRight: CAP_SPACE_08 }}
-						onClick={setNewContent}
-						isAddBtn
-					>
-						<FormattedMessage {...messages.textMessageCreateNew} />
-					</CapButton>
-
-					<CapHeading className="dragger-or" type="label6" style={{ display: 'inline-block' }}>
-						<FormattedMessage {...messages.textMessageORLabel} />
-					</CapHeading>
-
-					<CapButton
-						className="dragger-button select-template-button"
-						type="secondary"
-						style={{ marginLeft: CAP_SPACE_08 }}
-						onClick={onSelectTemplate}
-					>
-						<FormattedMessage {...messages.textMessageSelectTemplate} />
-					</CapButton>
-				</div>
-			)
-		} else {
-			return (
-				<>
-					<CapInput.TextArea
-						maxLength={MAX_ALLOWED_TITLE_LENGTH}
-						label={<FormattedMessage {...messages.titleLabel} />}
-						inductiveText={<FormattedMessage {...messages.titleDescription} />}
-						onChange={onTitleChange}
-						value={altText}
-						errorMessage={errorTitle}
-						className="title-textarea"
-					/>
-					<CapTab
-						defaultActiveKey={`${defaultActiveIndex}`}
-						activeKey={activeIndex}
-						tabBarExtraContent={operations}
-						onChange={onTabChange}
-						panes={getTabPanes()}
-					/>
-				</>
-			);
-		}
-	}
-
-	return (
-		<div className={className}>
-			<CapHeader
-				title={(
-					<>
-						<span style={{ paddingRight: 6 }}>
-							{formatMessage(messages.cardMessageTitle)}
-						</span>
-						<CapTooltipWithInfo title={formatMessage(messages.cardMessageInfo)} />
-					</>
-				)}
-				size="regular"
-				description={formatMessage(messages.cardMessageDescription)}
-				className="card-message-header"
-			/>
-			{
-				isFullMode
-					? (
-						<CapInput
-							id={`${id}_input`}
-							onChange={onTextTitleChange}
-							errorMessage={errorMessageTitle}
-							className="image-template-title"
-							style={inheritedTitleStyle || {}}
-							placeholder={formatMessage(messages.textMessageTitlePlaceholder)}
-							defaultValue={messageTitle || ''}
-							value={messageTitle || ''}
-							size="default"
-							label={formatMessage(messages.textMessageTitleLabel)}
-						/>
-					)
-					: null
-			}
-			{getTemplateSection()}
-			<CapDrawer
-				content={getLineImageDrawerContent()}
-				visible={isTemplateDrawerRequired}
-				width={624}
-				onClose={() => updateTemplateDrawerRequirement(false)}
-			/>
-		</div>
-
-	)
-}
-
-export default injectIntl(withStyles(LineImageCarousel, style));

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

@@ -1,178 +0,0 @@
-/*
- * LineImageCarousel Messages
- *
- * This contains all the text for the LineImageCarousel component.
- */
-import { defineMessages } from 'react-intl';
-const scope = `creatives.containersV2.LineImageCarousel`;
-
-export default defineMessages({
-  "textMessageAddLabel": {
-    id: `${scope}.textMessageAddLabel`,
-    defaultMessage: 'How do you want to upload the "Card message"?',
-  },
-  "textMessageCreateNew": {
-    id: `${scope}.textMessageCreateNew`,
-    defaultMessage: 'Create new',
-  },
-  "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: 'Format: JPEG, PNG  Aspect Ratio: 1:1 Dimensions: 1024px x 1024px  Size: 1 MB',
-  },
-  "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',
-  },
-  "lineImageIncorrectSize": {
-    id: `${scope}.lineImageIncorrectSize`,
-    defaultMessage: 'Please upload the image with correct type, size and dimension',
-  },
-  "imageGallery": {
-    id: `${scope}.imageGallery`,
-    defaultMessage: 'Gallery',
-  },
-  "uploadImageLabel": {
-    id: `${scope}.uploadImageLabel`,
-    defaultMessage: 'Upload Image',
-  },
-  "uploadImageDescription": {
-    id: `${scope}.uploadImageDescription`,
-    defaultMessage: 'The relevant image that complements the message context.',
-  },
-  "select": {
-    id: `${scope}.select`,
-    defaultMessage: 'Select',
-  },
-  "lineTemplateImage": {
-    id: `${scope}.lineTemplateImage`,
-    defaultMessage: 'Line templates - Image',
-  },
-  "searchImages": {
-    id: `${scope}.searchImages`,
-    defaultMessage: 'Search Images',
-  },
-  "addCard": {
-    id: `${scope}.addCard`,
-    defaultMessage: 'Add card',
-  },
-  "actionLabelPlaceholder": {
-    id: `${scope}.actionLabelPlaceholder`,
-    defaultMessage: 'Enter action label',
-  },
-  "actionLabelTitle": {
-    id: `${scope}.actionLabelTitle`,
-    defaultMessage: 'Action',
-  },
-  "actionTypePlaceholder": {
-    id: `${scope}.actionTypePlaceholder`,
-    defaultMessage: 'Select the action',
-  },
-  "actionTypeTitle": {
-    id: `${scope}.actionTypeTitle`,
-    defaultMessage: 'Action Type',
-  },
-  "textActionTypeTitle": {
-    id: `${scope}.textActionTypeTitle`,
-    defaultMessage: 'TEXT',
-  },
-  "enterTextActionTypeTitle": {
-    id: `${scope}.enterTextActionTypeTitle`,
-    defaultMessage: 'Enter text',
-  },
-  "enterUrlActionTypeTitle": {
-    id: `${scope}.enterUriActionTypeTitle`,
-    defaultMessage: 'Enter url',
-  },
-  "urlActionTypeTitle": {
-    id: `${scope}.urlActionTypeTitle`,
-    defaultMessage: 'URL',
-  },
-  "emptyActionContentErrorMessage": {
-    id: `${scope}.emptyActionContentErrorMessage`,
-    defaultMessage: 'Action content can not be empty',
-  },
-  "inValidUrliErrorMessage": {
-    id: `${scope}.inValidUrliErrorMessage`,
-    defaultMessage: 'Action content uri is not valid',
-  },
-  "maxActionLabelErrorMessage": {
-    id: `${scope}.maxActionLabelErrorMessage`,
-    defaultMessage: 'Action label can not be more than 12 character',
-  },
-  "duplicateTooltipLabel": {
-    id: `${scope}.duplicateTooltipLabel`,
-    defaultMessage: 'Duplicate',
-  },
-  "shiftLeftTooltipLabel": {
-    id: `${scope}.shiftLeftTooltipLabel`,
-    defaultMessage: 'Shift Left',
-  },
-  "shiftRightTooltipLabel": {
-    id: `${scope}.shiftRightTooltipLabel`,
-    defaultMessage: 'Shift Right',
-  },
-  "deleteTooltipLabel": {
-    id: `${scope}.deleteTooltipLabel`,
-    defaultMessage: 'Delete',
-  },
-  "cardMessageTitle": {
-    id: `${scope}.cardMessageTitle`,
-    defaultMessage: 'Card Message',
-  },
-  "cardMessageDescription": {
-    id: `${scope}.cardMessageDescription`,
-    defaultMessage: 'Use this to present content with multiple cards in carousel format, packed into a single chat bubble.',
-  },
-  "cardMessageInfo": {
-    id: `${scope}.cardMessageInfo`,
-    defaultMessage: 'If your message contains multiple cards, all cards will be as tall as the tallest card.',
-  },
-  "titleLabel": {
-    id: `${scope}.titleLabel`,
-    defaultMessage: 'Title',
-  },
-  "titleDescription": {
-    id: `${scope}.titleDescription`,
-    defaultMessage: 'The title is shown in push notifications and in the user\'s chat list.',
-  },
-  "emptyAltTextErrorMessage": {
-    id: `${scope}.emptyAltTextErrorMessage`,
-    defaultMessage: 'Title can not be empty',
-  },
-});