@capillarytech/creatives-library 8.0.129 → 8.0.130

package/v2Containers/MobilePushNew/components/PlatformContentFields.js

@@ -1,345 +0,0 @@
-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,
-    handleDeepLinkKeysChange,
-    handleExternalLinkChange,
-    onTagSelect,
-    handleOnTagsContextChange,
-  } = handlers;
-
-  const {
-    deepLink,
-    deepLinkValue,
-    deepLinkKeysValue,
-    externalLinkValue,
-  } = linkProps;
-
-  // Debug logging removed - issue identified and fixed
-
-  // Get the selected deep link object to extract keys
-  const selectedDeepLink = deepLink?.find((link) => link?.value === deepLinkValue);
-  const deepLinkKeysFromSelection = selectedDeepLink?.keys;
-  
-  // Handle deep link keys value - could be array or string
-  let deepLinkKeysArray = [];
-  if (Array.isArray(deepLinkKeysValue)) {
-    deepLinkKeysArray = deepLinkKeysValue;
-  } else if (deepLinkKeysValue) {
-    deepLinkKeysArray = [deepLinkKeysValue];
-  }
-
-  let deepLinkKeysFromSelectionArray = [];
-  if (Array.isArray(deepLinkKeysFromSelection)) {
-    deepLinkKeysFromSelectionArray = deepLinkKeysFromSelection;
-  } else if (deepLinkKeysFromSelection) {
-    deepLinkKeysFromSelectionArray = [deepLinkKeysFromSelection];
-  }
-
-  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 onDeepLinkKeysChange = useCallback(
-    ({ target: { value } }) => {
-      // Parse comma-separated values into array
-      const keysArray = value.split(',').map((key) => key.trim()).filter((key) => key.length > 0);
-      handleDeepLinkKeysChange(keysArray);
-    },
-    [handleDeepLinkKeysChange]
-  );
-
-  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>
-              )}
-              {content.actionOnClick && content.linkType === DEEP_LINK && deepLinkValue && deepLinkKeysFromSelectionArray.length > 0 && (
-                <CapRow style={{ marginTop: "10px", left: "6%", width: '115%'}}>
-                  <CapColumn span={7}>
-                    <CapHeading type="h4" className="deep-link-keys-heading">
-                      {formatMessage(messages.deepLinkKeys)}
-                    </CapHeading>
-                    <CapLabel type="label2" className="deep-link-keys-value">
-                      {(() => {
-                        if (deepLinkKeysFromSelectionArray.length > 0) {
-                          return deepLinkKeysFromSelectionArray.join(', ');
-                        }
-                        if (deepLinkKeysArray.length > 0) {
-                          return deepLinkKeysArray.join(', ');
-                        }
-                        return "No value set";
-                      })()}
-                    </CapLabel>
-                    <CapInput
-                      id="mobile-push-deep-link-keys-input"
-                      onChange={onDeepLinkKeysChange}
-                      placeholder={formatMessage(messages.deepLinkKeysPlaceholder, { key: deepLinkKeysFromSelectionArray.join(', ') || 'deep link keys' })}
-                      value={Array.isArray(deepLinkKeysValue) ? deepLinkKeysValue.join(', ') : (deepLinkKeysValue || "")}
-                      size="default"
-                      style={{ marginTop: "10px" }}
-                      error={errors?.deepLinkKeys}
-                    />
-                  </CapColumn>
-                </CapRow>
-              )}
-            </CapRow>
-            <CtaButtons {...ctaButtonProps} />
-          </>
-        )}
-      </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,
-    deepLinkKeys: 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

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