@capillarytech/creatives-library 6.9.1 → 6.9.5

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

@@ -0,0 +1,526 @@
+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

@@ -0,0 +1,178 @@
+/*
+ * 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',
+  },
+});