@capillarytech/creatives-library 8.0.123 → 8.0.125-alpha.0

package/v2Containers/MobilePushNew/components/PlatformContentFields.js

@@ -0,0 +1,279 @@
+import React, { useCallback } from "react";
+import PropTypes from "prop-types";
+import { FormattedMessage } from "react-intl";
+import CapRow from "@capillarytech/cap-ui-library/CapRow";
+import CapInput from "@capillarytech/cap-ui-library/CapInput";
+import CapColumn from "@capillarytech/cap-ui-library/CapColumn";
+import CapHeading from "@capillarytech/cap-ui-library/CapHeading";
+import CapError from "@capillarytech/cap-ui-library/CapError";
+import CapDivider from "@capillarytech/cap-ui-library/CapDivider";
+import CapSelect from "@capillarytech/cap-ui-library/CapSelect";
+import CapCheckbox from "@capillarytech/cap-ui-library/CapCheckbox";
+import CapLabel from "@capillarytech/cap-ui-library/CapLabel";
+import CapInfoNote from "@capillarytech/cap-ui-library/CapInfoNote";
+import TagList from "../../TagList";
+import {
+  ANDROID,
+  IOS,
+  MEDIA_TYPES_OPTIONS,
+  LINK_TYPE_OPTIONS,
+  DEEP_LINK,
+  EXTERNAL_LINK,
+} from "../constants";
+import messages from "../messages";
+import MediaUploaders from "./MediaUploaders";
+import CtaButtons from "./CtaButtons";
+
+const PlatformContentFields = ({
+  deviceType,
+  content,
+  errors,
+  handlers,
+  tagListProps,
+  mediaUploaderProps,
+  ctaButtonProps,
+  linkProps,
+  sameContent,
+  formatMessage,
+}) => {
+  const { title: titleError, message: messageError } = errors;
+  const {
+    handleTitleChange,
+    handleMessageChange,
+    handleMediaTypeChange,
+    handleActionOnClickChange,
+    handleLinkTypeChange,
+    handleDeepLinkChange,
+    handleExternalLinkChange,
+    onTagSelect,
+    handleOnTagsContextChange,
+  } = handlers;
+
+  const { deepLink, deepLinkValue, externalLinkValue } = linkProps;
+
+  const onTitleChange = useCallback(
+    ({ target: { value } }) => {
+      handleTitleChange(deviceType, value);
+    },
+    [handleTitleChange, deviceType]
+  );
+
+  const onMessageChange = useCallback(
+    ({ target: { value } }) => {
+      handleMessageChange(deviceType, value);
+    },
+    [handleMessageChange, deviceType]
+  );
+
+  const onMediaTypeChange = useCallback(
+    (value) => {
+      handleMediaTypeChange(deviceType, value);
+    },
+    [handleMediaTypeChange, deviceType]
+  );
+
+  const onActionOnClickChange = useCallback(
+    (e) => handleActionOnClickChange(deviceType, e.target.checked),
+    [handleActionOnClickChange, deviceType]
+  );
+
+  const onLinkTypeChange = useCallback(
+    (value) => handleLinkTypeChange(deviceType, value),
+    [handleLinkTypeChange, deviceType]
+  );
+
+  const onDeepLinkChange = useCallback((value) => handleDeepLinkChange(value), [
+    handleDeepLinkChange,
+  ]);
+
+  const onExternalLinkChange = useCallback(
+    (e) => handleExternalLinkChange(e.target.value),
+    [handleExternalLinkChange]
+  );
+
+  const getTagList = useCallback(
+    (index) => (
+      <TagList
+        {...tagListProps}
+        onTagSelect={(value) => onTagSelect(value, index)}
+        onContextChange={handleOnTagsContextChange}
+      />
+    ),
+    [tagListProps, onTagSelect, handleOnTagsContextChange]
+  );
+
+  return (
+    <>
+      {sameContent && (
+        <CapInfoNote message={formatMessage(messages.sameContentNote)} />
+      )}
+      <CapRow className="content-fields">
+        <CapRow className="creatives-mpush-title">
+          <CapColumn className="mpush-title-main">
+            <CapHeading type="h4" className="mpush-title">
+              <FormattedMessage {...messages.title} />
+            </CapHeading>
+            {getTagList(0)}
+          </CapColumn>
+          <CapInput
+            id={`mobile-push-title-name-input-${deviceType}`}
+            onChange={onTitleChange}
+            placeholder={formatMessage(messages.titlePlaceholder)}
+            value={content.title}
+            size="default"
+            isRequired
+            errorMessage={
+              titleError && (
+                <CapError className="mobile-push-template-title-error">
+                  {titleError}
+                </CapError>
+              )
+            }
+          />
+        </CapRow>
+
+        <CapRow className="creatives-mpush-message">
+          <CapColumn className="mpush-message-main">
+            <CapHeading type="h4" className="mpush-message">
+              <FormattedMessage {...messages.message} />
+            </CapHeading>
+            {getTagList(1)}
+          </CapColumn>
+          <CapInput
+            id={`mobile-push-message-name-input-${deviceType}`}
+            onChange={onMessageChange}
+            placeholder={formatMessage(messages.messagePlaceholder)}
+            value={content.message}
+            size="default"
+            isRequired
+            errorMessage={
+              messageError && (
+                <CapError className="mobile-push-template-message-error">
+                  {messageError}
+                </CapError>
+              )
+            }
+          />
+        </CapRow>
+        <CapDivider />
+        <CapRow className="creatives-mpush-media">
+          <CapHeading type="h4" className="mpush-media-type">
+            <FormattedMessage {...messages.mediaType} />
+          </CapHeading>
+          <CapSelect.CapCustomSelect
+            width="100%"
+            className="margin-t-4"
+            options={MEDIA_TYPES_OPTIONS}
+            value={content.mediaType}
+            onChange={onMediaTypeChange}
+          />
+          <MediaUploaders
+            mediaType={content.mediaType}
+            {...mediaUploaderProps}
+            formatMessage={formatMessage}
+          />
+        </CapRow>
+        {content.mediaType !== "CAROUSEL" && (
+          <>
+            <CapDivider />
+            <CapRow className="creatives-mpush-actions">
+              <CapRow className="mpush-actions-main">
+                <CapHeading type="h4" className="mpush-actions">
+                  <FormattedMessage {...messages.buttonsAndLinks} />
+                </CapHeading>
+                <CapLabel className="optional-text">
+                  <FormattedMessage {...messages.optionalText} />
+                </CapLabel>
+              </CapRow>
+              <CapCheckbox
+                checked={content.actionOnClick}
+                onChange={onActionOnClickChange}
+                className="action-on-click-checkbox"
+              >
+                <FormattedMessage {...messages.actionOnClickBody} />
+              </CapCheckbox>
+              <CapRow>
+                <CapLabel className="action-description">
+                  <FormattedMessage {...messages.actionDescription} />
+                </CapLabel>
+              </CapRow>
+              {content.actionOnClick && (
+                <CapRow style={{ display: "flex", justifyContent: "space-around" }}>
+                  <CapColumn span={6}>
+                    <CapHeading type="h4" className="buttons-heading">
+                      <FormattedMessage {...messages.linkType} />
+                    </CapHeading>
+                    <CapSelect.CapCustomSelect
+                      options={LINK_TYPE_OPTIONS}
+                      value={content.linkType}
+                      onChange={onLinkTypeChange}
+                      key="mobile-push-link-type"
+                      selectPlaceholder={formatMessage(messages.selectDeepLink)}
+                    />
+                  </CapColumn>
+                  {content.linkType === DEEP_LINK && (
+                    <CapColumn span={14}>
+                      <CapHeading type="h4" className="buttons-heading">
+                        {formatMessage(messages.deepLink)}
+                      </CapHeading>
+                      <CapSelect.CapCustomSelect
+                        options={deepLink || []}
+                        value={deepLinkValue}
+                        onChange={onDeepLinkChange}
+                        key="mobile-push-deep-link-type"
+                        placeholder={formatMessage(messages.selectDeepLink)}
+                        style={{ marginTop: "10px" }}
+                      />
+                    </CapColumn>
+                  )}
+                  {content.linkType === EXTERNAL_LINK && (
+                    <CapColumn span={14}>
+                      <CapHeading type="h4" className="buttons-heading">
+                        {formatMessage(messages.externalLink)}
+                      </CapHeading>
+                      <CapInput
+                        id="mobile-push-external-link-input"
+                        onChange={onExternalLinkChange}
+                        placeholder={formatMessage(messages.enterExternalLink)}
+                        value={externalLinkValue}
+                        size="default"
+                        isRequired
+                        errorMessage={
+                          errors.externalLink && (
+                            <CapError className="mobile-push-external-link-error">
+                              {errors.externalLink}
+                            </CapError>
+                          )
+                        }
+                      />
+                    </CapColumn>
+                  )}
+                </CapRow>
+              )}
+              <CtaButtons {...ctaButtonProps} />
+            </CapRow>
+          </>
+        )}
+      </CapRow>
+    </>
+  );
+};
+
+PlatformContentFields.propTypes = {
+  deviceType: PropTypes.oneOf([ANDROID, IOS]).isRequired,
+  content: PropTypes.object.isRequired,
+  errors: PropTypes.shape({
+    title: PropTypes.string,
+    message: PropTypes.string,
+    externalLink: PropTypes.string,
+  }).isRequired,
+  handlers: PropTypes.object.isRequired,
+  tagListProps: PropTypes.object.isRequired,
+  mediaUploaderProps: PropTypes.object.isRequired,
+  ctaButtonProps: PropTypes.object.isRequired,
+  linkProps: PropTypes.object.isRequired,
+  sameContent: PropTypes.bool.isRequired,
+  formatMessage: PropTypes.func.isRequired,
+};
+
+export default PlatformContentFields;

package/v2Containers/MobilePushNew/components/index.js

@@ -0,0 +1,5 @@
+import CtaButtons from './CtaButtons';
+import MediaUploaders from './MediaUploaders';
+import PlatformContentFields from './PlatformContentFields';
+
+export { CtaButtons, MediaUploaders, PlatformContentFields };