@capillarytech/creatives-library 6.13.2 → 6.13.4

package/v2Containers/Viber/index.js

@@ -0,0 +1,700 @@
+import React, { useState, useEffect } from 'react';
+import { bindActionCreators } from 'redux';
+import { createStructuredSelector } from 'reselect';
+import { injectIntl, FormattedMessage } from 'react-intl';
+// import { connect } from 'react-redux';
+import { get } from 'lodash';
+import withCreatives from '../../hoc/withCreatives';
+import {
+  CapHeader,
+  CapRow,
+  CapColumn,
+  CapSpin,
+  CapLabel,
+  CapInput,
+  CapHeading,
+  CapDivider,
+  CapIcon,
+  CapButton,
+  CapUploader,
+  CapDrawer,
+  CapNotification,
+  CapImage,
+} from '@capillarytech/cap-ui-library';
+import { makeSelectViber, makeSelectCreateViber } from './selectors';
+import * as viberActions from './actions';
+import { validateTags } from '../../utils/tagValidations';
+import TemplatePreview from '../../v2Components/TemplatePreview';
+import './_viber.scss';
+import {
+  CAP_G09,
+  CAP_SPACE_08,
+  CAP_SPACE_12,
+  FONT_COLOR_05,
+  CAP_SPACE_32,
+  CAP_SPACE_24,
+  CAP_WHITE,
+  CAP_SPACE_16,
+  CAP_G07,
+} from '@capillarytech/cap-ui-library/styled/variables';
+import LabelHOC from '@capillarytech/cap-ui-library/assets/HOCs/ComponentWithLabelHOC';
+import styled from 'styled-components';
+import messages from './messages';
+import TagList from '../TagList';
+import { makeSelectMetaEntities, setInjectedTags } from '../Cap/selectors';
+import Gallery from '../Assets/Gallery';
+import {
+  ALLOWED_EXTENSIONS_REGEX,
+  VIBER_IMG_HEIGHT,
+  VIBER_IMG_WIDTH,
+  VIBER_IMG_SIZE,
+  charLimit,
+} from './constants';
+const { CapHeadingSpan } = CapHeading;
+const { TextArea } = CapInput;
+
+const Viber = (props) => {
+  const {
+    intl,
+    supportedExtensions,
+    isFullMode,
+    injectedTags,
+    location,
+    metaEntities,
+    globalActions,
+    handleClose,
+    onCreateComplete,
+    params,
+    actions,
+    viber,
+  } = props || {};
+
+  const { formatMessage } = intl;
+  const [isImageError, updateImageErrorMessage] = useState(false);
+  const [isImage, updateImageStatus] = useState(false);
+  const [imageSrc, updateImageSrc] = useState();
+  const [isDrawerRequired, updateDrawerRequirement] = useState(false);
+  const [messageContent, updateTextMessageContent] = useState('');
+  const [buttonText, updateButtonText] = useState('');
+  const [buttonURL, updateButtonUrl] = useState('');
+  const [errorMessageTextarea, updateErrorMessageTextArea] = useState(false);
+  const [imagePreview, updateImagePreview] = useState();
+  const [isEditLoading, updateEditLoading] = useState(false);
+  const [isEditFlow, checkEditFlow] = useState(false);
+  const [messageTitle, updateTextMessageTitle] = useState('');
+  const [errorMessageTitle, updateErrorMessageTitle] = useState(false);
+
+  const StyledHeader = styled(CapHeader)`
+  margin-bottom: 14px;
+`;
+  const ViberFooter = styled.div`
+    background-color: ${CAP_WHITE};
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+    margin-left: -32px;
+    padding: ${CAP_SPACE_32} ${CAP_SPACE_24};
+
+    .ant-btn {
+      margin-right: ${CAP_SPACE_16};
+    }
+    }
+`;
+
+  const paramObj = params || {};
+
+  useEffect(() => {
+    const { id } = paramObj;
+    if (id) {
+      updateEditLoading(true);
+      actions.getTemplateDetails(id, updateEditLoading);
+      checkEditFlow(true);
+    }
+  }, [paramObj.id]);
+
+  useEffect(() => {
+    if (params && params.id) {
+      const { viber: editViberContent = {} } = get(viber, `templateDetails.versions.base.content`, {});
+      const editMessageTitle = get(viber, 'templateDetails.name');
+      updateTextMessageTitle(editMessageTitle);
+      updateTextMessageContent(editViberContent.text || '');
+      updateButtonText(editViberContent.buttonText || '');
+      updateButtonUrl(editViberContent.buttonURL || '');
+      if (editViberContent.imageURL) {
+        updateImageSrc(editViberContent.imageURL);
+        updateImagePreview(editViberContent.imageURL);
+        updateImageStatus(true);
+      }
+    }
+  }, [viber[`templateDetails`]]);
+
+// Common container for TEXT, IMAGE and Button
+  const container = (icon, message, data) => (<CapRow
+    style={{
+      border: `solid 1px ${CAP_G07}`,
+      marginBottom: '20px',
+    }}>
+    <CapRow style={{ padding: `${CAP_SPACE_12} ${CAP_SPACE_24} 0px` }}>
+      <CapIcon type={icon}/>
+      <CapHeading type="h4" style={{position: 'absolute', display: 'inline-block', top: '13px', paddingLeft: '10px'}}>
+        {message}
+      </CapHeading>
+    </CapRow>
+    <CapDivider className="cap-divider-margin"/>
+    <CapRow style={{ padding: `0 ${CAP_SPACE_24} 22px` }}>
+      {data}
+    </CapRow>
+  </CapRow>);
+
+// ******************** Text area Code start here ******************************
+
+// Tags Code start from here
+  useEffect(() => {
+    const type = location && location.query && location.query.type;
+    const getTagsQuery = {
+      layout: 'LINE',
+      type: 'TAG',
+      context: type ? 'outbound' : 'default',
+      embedded: type || 'full',
+    };
+    globalActions.fetchSchemaForEntity(getTagsQuery);
+  }, []);
+
+  const onTagSelect = (data) => {
+    const messageData = `${messageContent}{{${data}}}`;
+    updateTextMessageContent(messageData);
+    updateTextContentError(messageData);
+  };
+
+  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 tags = metaEntities && metaEntities.tags
+  ? metaEntities.tags.standard
+  : [];
+
+// tags Code end here
+
+// validation on Text area and tags validation
+  const updateTextContentError = (value) => {
+    let errorMessage = false;
+    const { valid } = validateTags({
+      content: value,
+      tagsParam: tags,
+      injectedTagsParams: injectedTags,
+      location,
+      tagModule: 'outbound',
+    }) || {};
+    if (value.trim() === '') {
+      errorMessage = formatMessage(messages.emptyContentErrorMessage);
+    } else if (value.length > charLimit) {
+      errorMessage = formatMessage(messages.limitExceededContentErrorMessage);
+    } else if (!valid) {
+      errorMessage = formatMessage(messages.invalidTagError);
+    }
+    updateErrorMessageTextArea(errorMessage);
+  };
+
+  // on change event of Text Area
+  const onTextContentChange = ({ target: { value } }) => {
+    updateTextMessageContent(value);
+    updateTextContentError(value);
+  };
+
+  const onTextTitleChange = ({ target: { value } }) => {
+    updateTextMessageTitle(value);
+    updateTextTitleError(value);
+  };
+
+  const updateTextTitleError = (value) => {
+    let errorMessage = false;
+    if (value === '') {
+      errorMessage = formatMessage(messages.emptyTitleErrorMessage);
+    }
+    updateErrorMessageTitle(errorMessage);
+  };
+  // Text Area container
+  const TextAreaViber = (<>
+    <TextArea
+      id={'viber_textarea'}
+      label={(
+      <>
+        <FormattedMessage {...messages.textMessage} />
+        <CapLabel
+          type="label2" style={{display: 'inline-block',
+            float: 'right'}}>
+          {(messageContent || '').length}/{charLimit} {" "}
+          <FormattedMessage {...messages.characters} />
+
+        </CapLabel>
+      </>
+      )}
+      autosize={false}
+      onChange={onTextContentChange}
+      className={`${errorMessageTextarea ? 'error' : ''}`}
+      errorMessage={errorMessageTextarea}
+      defaultValue={messageContent || ''}
+      value={messageContent || ''}
+      rows={5}
+      cols={2}
+    />
+    <TagList
+      key={'viber_tags'}
+      moduleFilterEnabled={location && location.query && location.query.type !== 'embedded'}
+      label={formatMessage(messages.addLabels)}
+      onTagSelect={onTagSelect}
+      onContextChange={handleOnTagsContextChange}
+      location={location}
+      tags={tags}
+      injectedTags={injectedTags || {}}
+      id={'viber_tags'}
+      userLocale={localStorage.getItem('jlocale') || 'en'}
+    />
+  </>);
+
+// ******************** Text area Code End here ******************************
+
+// ******************** Image section Code start here ******************************
+  useEffect(() => {
+    if (viber[`uploadedAssetData0`] && Object.keys(viber[`uploadedAssetData0`]).length) {
+      const imgSrc = get(viber, `uploadedAssetData0.metaInfo.secure_file_path`, '');
+      actions.clearViberAsset(0);
+      if (imgSrc) {
+        updateImageSrc(imgSrc);
+        updateImageStatus(true);
+      }
+    }
+  }, [viber[`uploadedAssetData0`]]);
+
+  const submitAction = (data, incorrectFile) => {
+    const {
+      file: {size},
+      fileParams: {
+          height,
+          width,
+      },
+    } = data;
+    if (incorrectFile || size > VIBER_IMG_SIZE || height > VIBER_IMG_HEIGHT || width > VIBER_IMG_WIDTH) {
+      updateImageErrorMessage(formatMessage(messages.viberImageIncorrectSize));
+    } else {
+      updateImageErrorMessage('');
+      actions.uploadViberAsset(
+        data.file,
+        data.type,
+        data.fileParams,
+        0,
+    );
+    }
+  };
+
+  const uploadImages = (e, {files}) => {
+    if (e) {
+      e.preventDefault();
+    }
+    const _URL = window.URL || window.webkitURL;
+    let incorrectFile = false;
+    const file = files[0];
+    if (!ALLOWED_EXTENSIONS_REGEX.test(file.name)) {
+      incorrectFile = true;
+    }
+    const img = new Image();
+    img.src = _URL.createObjectURL(file);
+    img.onload = () => {
+      const fileParams = {
+        width: img.width,
+        height: img.height,
+        error: file && (file.size / (1e+6) > 3),
+      };
+      submitAction({file, type: 'image', fileParams}, incorrectFile);
+    };
+    if (e) {
+      const event = e;
+      event.target.value = null;
+    }
+  };
+
+  const ImageComponent = () => (<>
+    <CapHeader
+      title={formatMessage(messages.uploadImage)}
+      description={formatMessage(messages.imageDesc)}
+      size="regular"
+          />
+    <div
+      className={`image-container ${props.ifError ? 'error' : ''}`}
+      style={{
+        marginTop: 20,
+        backgroundColor: CAP_G09,
+      }}
+    >
+      {isImage && (<CapImage src={imageSrc} alt="viber-image-src" height="400" />)}
+    </div></>
+    );
+
+  const setDrawerVisibility = (drawervisibleFlag) => updateDrawerRequirement(drawervisibleFlag);
+
+  const onGalleryClick = (event) => {
+    event.stopPropagation();
+    setDrawerVisibility(true);
+  };
+
+  const capUploaderCustomRequest = (uploadData) => {
+    uploadImages(undefined, {files: [uploadData.file]});
+  };
+  const onReUpload = () => {
+    updateImageStatus(false);
+    // deleteUploadedImgList(index);
+    updateImageSrc('');
+    updateImagePreview('');
+  };
+  const getViberImageSection = () => {
+    if (!isImage) {
+      return (<>
+        <CapUploader.CapDragger
+          customRequest={capUploaderCustomRequest}
+          className="form-builder-dragger"
+        >
+          <CapHeading className="dragger-title" type="h7">
+            <FormattedMessage {...messages.dragAndDrop} />
+          </CapHeading>
+          <CapHeading className="dragger-or" type="label6">
+            <FormattedMessage {...messages.or} />
+          </CapHeading>
+          <CapButton className="dragger-button" type="secondary" style={{marginRight: CAP_SPACE_08}}>
+            <FormattedMessage {...messages.uploadComputer} />
+          </CapButton>
+          <CapButton
+            className="dragger-button"
+            type="secondary"
+            style={{marginLeft: CAP_SPACE_08}}
+            onClick={onGalleryClick}
+                >
+            <FormattedMessage {...messages.uploadGallery} />
+          </CapButton>
+        </CapUploader.CapDragger>
+        <div style={{marginTop: '15px' }}>
+          <CapHeadingSpan type="label2" style={{marginTop: CAP_SPACE_12, marginRight: '46px' }}>
+            <FormattedMessage {...messages.imageDimenstionDescription} />
+          </CapHeadingSpan>
+          <CapHeadingSpan type="label2" style={{marginTop: CAP_SPACE_12 }}>
+            <FormattedMessage {...messages.imageSizeDescription} />
+          </CapHeadingSpan>
+        </div>
+
+        </>
+      );
+    }
+    return (
+      <CapButton
+        className="dragger-button"
+        type="flat"
+        style={{
+          top: 0,
+          position: 'absolute',
+          right: 0,
+          color: FONT_COLOR_05,
+        }}
+        onClick={onReUpload}
+       >
+        <FormattedMessage {...messages.imageReUpload} />
+      </CapButton>
+    );
+  };
+
+  const getGalleryDrawerContent = () => {
+    const locationGallery = {
+      pathname: `/assets`,
+      search: '',
+      query: !isFullMode ? {type: 'embedded', module: 'library'} : {},
+    };
+    return (
+      <>
+        <CapHeading type="h3">
+          {formatMessage(messages.imageGallery)}
+        </CapHeading>
+        <Gallery
+          location={locationGallery}
+          isFullMode={isFullMode}
+          isLineAsset
+          onGalleryImageSelect={onGalleryImageSelect}
+          />
+      </>
+    );
+  };
+
+  const onGalleryImageSelect = (imageTemplate) => {
+    const image = get(imageTemplate, 'metaInfo.secure_file_path');
+    const imageURL = get(imageTemplate, 'metaInfo.secure_file_path_preview');
+    updateDrawerRequirement(false);
+    if (!ALLOWED_EXTENSIONS_REGEX.test(image)) {
+      updateImageErrorMessage(formatMessage(messages.viberImageIncorrectSize));
+    } else {
+      updateImageErrorMessage('');
+      updateImageStatus(true);
+      updateImageSrc(image);
+      updateImagePreview(imageURL);
+    }
+  };
+
+  const WithLabel = LabelHOC(ImageComponent);
+  const ImageViber = <>
+    <WithLabel
+      key={`viber-with-label`}
+      errorMessage={isImageError} ifError={!!isImageError}
+    />
+    <form encType="multipart/form-data" id={`viber_form`}>
+      <input
+        key={`viber_imgFile`}
+        style={{ display: 'none' }}
+        id="fileName"
+        type="file"
+        onChange={(e) => uploadImages(e, { files: e.target.files })}
+        accept={supportedExtensions || "image/*"}
+      />
+      {getViberImageSection()}
+      <CapDrawer
+        content={getGalleryDrawerContent()}
+        visible={isDrawerRequired}
+        width={430}
+        onClose={() => updateDrawerRequirement(false)}
+      />
+    </form>
+  </>;
+// ******************** Image section End here ******************************
+
+
+// ******************** Button Code start here ******************************
+
+  const onChangeButtonText = ({ target: { value } }) => {
+    updateButtonText(value);
+  };
+
+  const onChangeButtonUrl = ({ target: { value } }) => {
+    updateButtonUrl(value);
+  };
+  const getPreviewSection = () =>
+    // const accountName = get(lineData, 'selectedLineAccount.name', '');
+     (
+       <TemplatePreview
+         channel="VIBER"
+         content={{imageURL: imagePreview, buttonText, messageContent}}
+         viberAccountName={"MUJI"}
+        />
+    );
+
+  const ButtonViber = (<>
+    <CapInput
+      id="viber-button-text"
+      type="input" onChange={onChangeButtonText}
+      label={formatMessage(messages.buttonText)}
+      defaultValue={buttonText}
+      value={buttonText}
+      style={{paddingBottom: '11px'}}
+    />
+    <CapInput
+      id="viber-button-url"
+      type="input"
+      onChange={onChangeButtonUrl}
+      defaultValue={buttonURL}
+      value={buttonURL}
+      label={formatMessage(messages.buttonUrl)}
+      />
+  </>);
+
+ // ******************** Button Code End here ******************************
+  const formatSubmitPayload = () => {
+    const messageData = {
+      text: messageContent,
+    };
+    if (imageSrc) {
+      messageData.imageURL = imageSrc;
+    }
+    if (buttonText && buttonURL) {
+      messageData.buttonText = buttonText;
+      messageData.buttonURL = buttonURL;
+    }
+    return {
+      versions: {
+        base: {
+          content: {
+            destinations: [
+              {
+                to: {
+                  phoneNumber: "{{viber_user_id}}",
+                },
+              },
+            ],
+            viber: {...messageData},
+          },
+        },
+      },
+      type: "VIBER",
+      name: messageTitle,
+    };
+  };
+
+  const createCallback = (errorMessage, isEdit) => {
+    if (!errorMessage) {
+      CapNotification.success({
+        message: formatMessage(messages.viberCreateNotification),
+      });
+      if (isEdit) {
+        actions.clearEditResponse();
+      } else {
+        actions.clearCreateResponse();
+      }
+    } else {
+      CapNotification.error({
+        message: errorMessage,
+      });
+    }
+  };
+
+  const onCreateViber = () => {
+    actions.createTemplate(
+        formatSubmitPayload(),
+        (resp, errorMessage) => {
+          createCallback(errorMessage);
+          onCreateComplete();
+        }
+    );
+  };
+
+  const onEditViber = () => {
+    actions.editTemplate(
+      {
+        ...formatSubmitPayload(),
+        _id: params.id,
+      },
+        (resp, errorMessage) => {
+          createCallback(errorMessage, true);
+          onCreateComplete();
+        });
+  };
+  const onDoneCallback = () => {
+    if (isFullMode) {
+      if (isEditFlow) {
+        return onEditViber;
+      }
+      return onCreateViber;
+    }
+    return '';
+  };
+
+  const isDisableDone = () => {
+    // textbox area should not empty and should have max 1000 charactor
+    if (messageContent.trim() === '' || errorMessageTextarea) {
+      return true;
+    }
+    // cannot send text + image only messages, Need to add button details or remove one of the components in order to proceed
+    const trimedButtonText = buttonText.trim();
+    const trimedButtonUrl = buttonURL.trim();
+    if (messageContent !== '' && imageSrc && (trimedButtonUrl === '' && trimedButtonUrl === '')) {
+      return true;
+    }
+    // if button is being added than button url and button Text both are mandatory
+    if (( trimedButtonText === '' && trimedButtonUrl !== '') || ( trimedButtonUrl !== '' && trimedButtonUrl === '')) {
+      return true;
+    }
+    return false;
+  };
+
+  return (
+    <>
+      <CapSpin spinning={isEditLoading}>
+        <CapRow>
+          <CapColumn span={14}>
+            <StyledHeader
+              title={formatMessage(messages.viberCreativeTitle)}
+              description={formatMessage(messages.viberCreativeDesc)}
+              size="regular"
+            />
+            {
+              isFullMode
+              ? (
+                <CapInput
+                  id={`viber_input`}
+                  onChange={onTextTitleChange}
+                  errorMessage={errorMessageTitle}
+                  className="text-template-title"
+                  placeholder={formatMessage(messages.textMessageTitlePlaceholder)}
+                  defaultValue={messageTitle || ''}
+                  value={messageTitle || ''}
+                  size="default"
+                  label={formatMessage(messages.textMessageTitleLabel)}
+                  style={{marginBottom: 20}}
+                  />
+              )
+              : null
+            }
+            {container("message", <FormattedMessage {...messages.message} />, TextAreaViber)}
+            {container("image", <FormattedMessage {...messages.image} />, ImageViber)}
+            {container("button", <FormattedMessage {...messages.button} />, ButtonViber)}
+            <div style={{marginBottom: '100px'}}/>
+          </CapColumn>
+          <CapColumn span={6}>
+            <CapRow>
+              <CapColumn span={23} offset={6}>
+                {getPreviewSection()}
+                <CapHeading
+                  type="h3"
+                  style={{margin: '24px 0px 0px 28px'}}
+                >
+                  <FormattedMessage {...messages.message} />: {" "}
+                  ({(messageContent || '').length}/{charLimit} {" "}
+                  <FormattedMessage {...messages.characters} />)
+                </CapHeading>
+              </CapColumn>
+            </CapRow>
+          </CapColumn>
+        </CapRow>
+        <ViberFooter>
+          <CapButton
+            onClick={onDoneCallback()}
+            disabled={isDisableDone()}
+            className="create-msg"
+          >
+            <FormattedMessage {...messages.doneButtonLabel} />
+          </CapButton>
+          <CapButton
+            onClick={handleClose}
+            className="cancel-msg"
+            type="secondary"
+                  >
+            <FormattedMessage {...messages.cancelButtonLabel} />
+          </CapButton>
+        </ViberFooter>
+      </CapSpin>
+
+    </>
+  );
+};
+
+const mapStateToProps = createStructuredSelector({
+  metaEntities: makeSelectMetaEntities(),
+  injectedTags: setInjectedTags(),
+  viberData: makeSelectViber(),
+  viber: makeSelectCreateViber(),
+});
+
+const mapDispatchToProps = (dispatch) => ({
+  actions: bindActionCreators(viberActions, dispatch),
+});
+
+
+export default withCreatives({
+  WrappedComponent: injectIntl(Viber),
+  mapStateToProps,
+  mapDispatchToProps,
+  userAuth: true,
+});