@capillarytech/creatives-library 7.0.0 → 7.0.1

package/v2Containers/Viber/index.js

@@ -1,707 +0,0 @@
-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 {
-  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,
-    templateData = {},
-    actions,
-    viber = {},
-    getFormSubscriptionData,
-  } = 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 && !get(templateData, `versions.base.content`)) {
-      updateEditLoading(true);
-      actions.getTemplateDetails(id, updateEditLoading);
-      checkEditFlow(true);
-    }
-  }, [paramObj.id]);
-
-  useEffect(() => {
-    if (params && params.id || templateData.edit) {
-      const { viber: editViberContent = {} } = get(templateData, `versions.base.content`) || get(viber, `templateDetails.versions.base.content`) || {};
-      const editMessageTitle = (templateData || {}).name || 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`] || templateData]);
-
-// 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 () => getFormSubscriptionData({
-      value: formatSubmitPayload(),
-      _id: params && params.id,
-      validity: true,
-      type: 'VIBER',
-    });
-  };
-
-  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,
-});