@capillarytech/creatives-library 7.17.92 → 7.17.93

package/v2Components/CapDeviceContent/index.js

@@ -1,338 +0,0 @@
-import React, { useCallback } from "react";
-import PropTypes from "prop-types";
-import { injectIntl, intlShape } from "react-intl";
-import cloneDeep from "lodash/cloneDeep";
-import isEmpty from "lodash/isEmpty";
-import CapHeading from "@capillarytech/cap-ui-library/CapHeading";
-import CapHeader from "@capillarytech/cap-ui-library/CapHeader";
-import CapInput from "@capillarytech/cap-ui-library/CapInput";
-import CapRadioGroup from "@capillarytech/cap-ui-library/CapRadioGroup";
-import CapRow from "@capillarytech/cap-ui-library/CapRow";
-import CapLabel from "@capillarytech/cap-ui-library/CapLabel";
-import CapLink from "@capillarytech/cap-ui-library/CapLink";
-import CapError from "@capillarytech/cap-ui-library/CapError";
-import CapCheckbox from "@capillarytech/cap-ui-library/CapCheckbox";
-import CapSelect from "@capillarytech/cap-ui-library/CapSelect";
-import TagList from "../../v2Containers/TagList";
-import messages from "./messages";
-import {
-  ANDROID,
-  INAPP_MEDIA_TYPES,
-  INAPP_BUTTON_TYPES,
-  ALLOWED_IMAGE_EXTENSIONS_REGEX,
-  INAPP_IMG_SIZE,
-  INITIAL_CTA_DATA,
-  MEDIA_RADIO_OPTIONS,
-} from "../../v2Containers/InApp/constants";
-import { INAPP } from "../../v2Containers/CreativesContainer/constants";
-import CapImageUpload from "../CapImageUpload";
-import CapInAppCTA from "../CapInAppCTA";
-import './index.scss';
-
-const CapDeviceContent = (props) => {
-  const {
-    intl,
-    location,
-    injectedTags,
-    selectedOfferDetails,
-    panes,
-    actions,
-    editData,
-    isFullMode,
-    inAppImageSrc,
-    setInAppImageSrc,
-    isEditFlow,
-    ctaData,
-    setCtaData,
-    buttonType,
-    setButtonType,
-    templateMediaType,
-    setTemplateMediaType,
-    title,
-    setTitle,
-    templateMessageError,
-    templateMessage,
-    setTemplateMessage,
-    setTemplateMessageError,
-    addActionLink,
-    setAddActionLink,
-    deepLink,
-    deepLinkValue,
-    setDeepLinkValue,
-    onCopyTitleAndContent,
-    tags,
-    onTagSelect,
-    handleOnTagsContextChange,
-  } = props || {};
-  const { TextArea } = CapInput;
-  const { formatMessage } = intl;
-
-  const isAndroid = panes === ANDROID;
-  const isMediaTypeImage = INAPP_MEDIA_TYPES.IMAGE === templateMediaType;
-  const isBtnTypeCta = buttonType === INAPP_BUTTON_TYPES.CTA;
-  const onTemplateMessageChange = ({ target: { value } }) => {
-    let error = '';
-    if (value === '') {
-      error = formatMessage(messages.emptyTemplateMessageErrorMessage);
-    }
-    setTemplateMessage(value);
-    setTemplateMessageError(error);
-  };
-
-  const setUpdateInAppImageSrc = useCallback(
-    (filePath) => {
-      const templateType = 0;
-      setInAppImageSrc(filePath);
-      actions.clearInAppAsset(templateType);
-    },
-    [inAppImageSrc]
-  );
-  const updateOnInAppImageReUpload = useCallback(() => {
-    setInAppImageSrc("");
-  }, [inAppImageSrc]);
-
-  const updateHandler = (ctaDataParam, index) => {
-    setCtaData((prevState) => {
-      const clonedCta = cloneDeep(prevState);
-      clonedCta[index] = ctaDataParam;
-      return clonedCta;
-    });
-  };
-
-  // function to delete CTA button
-  const deleteHandler = (index) => {
-    setCtaData((prevState) => {
-      const clonedCta = cloneDeep(prevState);
-      const filteredCta = clonedCta.filter((cta) => cta.index !== index);
-      if (filteredCta.length === 1) {
-        // updates the index of the cta buttons present in case there's a cta button deleted
-        filteredCta[0].index = 0;
-      }
-      if (isEmpty(filteredCta)) {
-        onChangeButtonType({target: { value: INAPP_BUTTON_TYPES.NONE } });
-      }
-      return filteredCta;
-    });
-  };
-
-  const buttonRadioOptions = [
-    {
-      value: INAPP_BUTTON_TYPES.NONE,
-      label: (
-        <CapHeading
-          type="h4"
-          className="inapp-button-none"
-        >
-          {formatMessage(messages.btnTypeNone)}
-        </CapHeading>
-      ),
-    },
-    {
-      value: INAPP_BUTTON_TYPES.CTA,
-      label: (
-        <>
-          <div
-            className="inapp-button-cta"
-          >
-            <CapHeading type="h4">
-              {formatMessage(messages.btnTypeCTA)}
-            </CapHeading>
-            <CapLabel>{formatMessage(messages.ctaDesc)}</CapLabel>
-          </div>
-        </>
-      ),
-    },
-  ];
-
-  const onTitleChange = ({ target: { value } }) => {
-    setTitle(value);
-  };
-
-  const onTemplateMediaTypeChange = ({ target: { value } }) => {
-    setTemplateMediaType(value);
-  };
-
-  const onChangeButtonType = ({ target: { value } }) => {
-    setButtonType(value);
-    setCtaData(INITIAL_CTA_DATA);
-  };
-
-  const uploadInAppAsset = (file, type, fileParams) => {
-    actions.uploadInAppAsset(file, type, fileParams, 0);
-  };
-
-  const getTagList = (index) => (
-    <TagList
-      moduleFilterEnabled={
-        location && location?.query && location?.query?.type !== "embedded"
-      }
-      label={formatMessage(messages.addLabel)}
-      onTagSelect={(value) => onTagSelect(value, index)}
-      onContextChange={handleOnTagsContextChange}
-      location={location}
-      tags={tags || []}
-      injectedTags={injectedTags || {}}
-      selectedOfferDetails={selectedOfferDetails}
-    />
-  );
-
-  return (
-    <>
-      <div className="creatives-device-content">
-        <CapLink
-          title={isAndroid
-              ? formatMessage(messages.copyContentFromIOS)
-              : formatMessage(messages.copyCotentFromAndroid)}
-          className="inapp-copy-content"
-          onClick={onCopyTitleAndContent}
-          />
-        <div className="creatives-inapp-title">
-          <div
-            className="inapp-content-main"
-          >
-            <CapHeading type="h5" className="inapp-title">
-              {formatMessage(messages.title)}
-            </CapHeading>
-            {getTagList(0)} {/* here 0 signifies the tags for template title */}
-          </div>
-          <CapInput
-            id="inapp-title-name-input"
-            onChange={onTitleChange}
-            placeholder={formatMessage(messages.titlePlaceholder)}
-            value={title}
-            size="default"
-            isRequired
-          />
-        </div>
-        <div className="creatives-inapp-media">
-          <div className="inapp-content-media">
-            <CapHeading type="h5" className="inapp-media-header">
-              {formatMessage(messages.mediaLabel)}
-            </CapHeading>
-            <CapRadioGroup
-              id="inapp-media-radio"
-              options={MEDIA_RADIO_OPTIONS}
-              value={templateMediaType}
-              onChange={onTemplateMediaTypeChange}
-              className="inapp-media-radio"
-            />
-          </div>
-        </div>
-        <div className={`creatives-inapp-message ${!isMediaTypeImage && "message-bottom-margin"}`}>
-          <div
-            className="inapp-message-header"
-          >
-            <CapHeading type="h5" className="inapp-message-header-style">
-              {formatMessage(messages.message)}
-            </CapHeading>
-            {getTagList(1)} {/* here 1 signifies the tags for template message */}
-          </div>
-          <TextArea
-            id="inapp-create-template-message-input"
-            className="inapp-create-template-message-input"
-            placeholder={formatMessage(messages.textAreaInputPlaceholder)}
-            onChange={onTemplateMessageChange}
-            value={templateMessage || ''}
-            autosize={{ minRows: 5, maxRows: 5 }}
-            errorMessage={templateMessageError && (
-              <CapError className="inapp-template-message-error">
-                {templateMessageError}
-              </CapError>
-            )}
-          />
-          {isMediaTypeImage && (
-            <>
-              <CapHeading type="h4" className="cover-img">
-                {formatMessage(messages.coverImage)}
-              </CapHeading>
-              <CapImageUpload
-                allowedExtensionsRegex={ALLOWED_IMAGE_EXTENSIONS_REGEX}
-                imgSize={INAPP_IMG_SIZE}
-                uploadAsset={uploadInAppAsset}
-                isFullMode={isFullMode}
-                imageSrc={inAppImageSrc}
-                updateImageSrc={setUpdateInAppImageSrc}
-                updateOnReUpload={updateOnInAppImageReUpload}
-                index={0}
-                className="cap-custom-image-upload"
-                key="inapp-uploaded-image"
-                imageData={editData}
-                channel={INAPP}
-                channelSpecificStyle={!isFullMode}
-              />
-            </>
-          )}
-        </div>
-      </div>
-      <div className="inapp-action-link">
-        <CapCheckbox onChange={() => setAddActionLink(!addActionLink)} checked={addActionLink} />
-        <div className="inapp-render-heading">
-          <CapHeader
-            title={<CapRow type="flex">
-              <CapHeading type="h4">
-                {formatMessage(messages.addActionLink)}
-              </CapHeading>
-            </CapRow>}
-            description={<CapLabel type="label3">{formatMessage(messages.addActionLinkDesc)}</CapLabel>}
-          />
-          {addActionLink && (
-            <div className="inapp-action-deep-link">
-              <CapHeading type="h4">
-                {formatMessage(messages.actionDeepLink)}
-              </CapHeading>
-              <CapSelect
-                id="inapp-add-action-link-type"
-                placeholder={formatMessage(messages.deepLinkOptionsPlaceholder)}
-                options={deepLink || []}
-                value={deepLinkValue}
-                onChange={(value) => { setDeepLinkValue(value); }}
-              />
-            </div>
-          )}
-        </div>
-      </div>
-      <div className="inapp-cta-button">
-        <CapHeader
-          className="inapp-render-heading-cta-button"
-          title={<CapRow type="flex">
-            <CapHeading type="h4">
-              {formatMessage(messages.btnLabel)}
-            </CapHeading>
-            <CapHeading
-              type="h6"
-              className="inapp-optional-label"
-            >
-              {formatMessage(messages.optional)}
-            </CapHeading>
-          </CapRow>}
-          description={<CapLabel type="label3">{formatMessage(messages.btnDesc)}</CapLabel>}
-          />
-        <CapRadioGroup
-          options={buttonRadioOptions}
-          value={buttonType}
-          onChange={onChangeButtonType}
-          className="inapp-btn-radio-group"
-        />
-        {isBtnTypeCta && (
-          <CapInAppCTA
-            ctaData={ctaData}
-            updateHandler={updateHandler}
-            deleteHandler={deleteHandler}
-            isEditFlow={isEditFlow}
-            deepLink={deepLink || []}
-          />
-        )}
-      </div>
-    </>
-  );
-};
-
-CapDeviceContent.propTypes = {
-  intl: intlShape.isRequierd,
-  location: PropTypes.string,
-  injectedTags: PropTypes.object,
-  selectedOfferDetails: PropTypes.array,
-  panes: PropTypes.string,
-};
-
-export default injectIntl(CapDeviceContent);

package/v2Components/CapDeviceContent/index.scss

@@ -1,115 +0,0 @@
-@import '~@capillarytech/cap-ui-library/styles/_variables.scss';
-
-.creatives-device-content {
-    .inapp-copy-content {
-        margin-top: $CAP_SPACE_08;
-        margin-bottom: $CAP_SPACE_16;
-    }
-
-    .creatives-inapp-title {
-        .inapp-content-main {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            margin-top: $CAP_SPACE_08;
-        }
-        .inapp-title {
-            font-weight: 500;
-        }
-    }
-
-    .creatives-inapp-media {
-        .inapp-media-header {
-            font-weight: 500;
-        }
-        .inapp-content-media {
-            margin-top: $CAP_SPACE_16;
-        }
-    
-        .inapp-media-radio {
-            font-weight: 500;
-            margin-top: $CAP_SPACE_16;
-        }
-    }
-    .creatives-inapp-message {
-        margin-top : $CAP_SPACE_12;
-        .inapp-message-header {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-
-            .inapp-message-header-style {
-              font-weight: 500;
-            }
-        }
-        .inapp-create-template-message-input {
-            min-height: 5.214rem;
-            margin-bottom: $CAP_SPACE_08;
-        }
-        .cap-custom-image-upload {
-            .dragger-button.re-upload {
-                top: 28rem;
-                position: absolute;
-                right: $CAP_SPACE_20;
-                color: $FONT_COLOR_05;
-              }
-        }
-    }
-    .message-bottom-margin{
-        margin-bottom: 0.857rem;
-    }
-}
-
-.inapp-action-link {
-    display: flex;
-    margin-top: 2rem;
-
-    .inapp-render-heading {
-        width: 100%;
-
-        .inapp-action-deep-link {
-            margin-top: $CAP_SPACE_12;
-
-            #inapp-add-action-link-type {
-                width: 100%;
-                margin-top: $CAP_SPACE_12;
-            }
-            .cap-select-v2 {
-                .ant-select-selection__placeholder {
-                    display: block;
-                }
-            }
-        }
-    }
-}
-.inapp-cta-button {
-    margin-top: 2rem;
-
-    .inapp-render-heading-cta-button {
-        .inapp-optional-label {
-            font-size: $CAP_SPACE_12;
-            color: $CAP_G06;
-            margin-left: $CAP_SPACE_04;
-        }
-    }
-    .inapp-btn-radio-group{
-        display: grid;
-    }
-    .inapp-button-none {
-        display: inline-grid;
-        margin-top: $CAP_SPACE_16;
-    }
-    .inapp-button-cta {
-       display: inline-grid;
-       margin-top: $CAP_SPACE_24;
-    }
-}
-.inapp-template-message-error {
-    margin-bottom: 1rem;
-}
-.image-container {
-    margin-top: 1.5rem;
-}
-.cover-img {
-    margin-top: 2rem;
-}

package/v2Components/CapDeviceContent/messages.js

@@ -1,107 +0,0 @@
-import { defineMessages } from "react-intl";
-
-const prefix = "app.v2Components.CapDeviceContent";
-
-export default defineMessages({
-  copyContentFromIOS: {
-    id: `${prefix}.copyContentFromIOS`,
-    defaultMessage: "Copy title and content from iOS",
-  },
-  copyCotentFromAndroid: {
-    id: `${prefix}.copyContentFromAndriod`,
-    defaultMessage: "Copy title and content from Android",
-  },
-  title: {
-    id: `${prefix}.title`,
-    defaultMessage: "Title",
-  },
-  addLabel: {
-    id: `${prefix}.addLabel`,
-    defaultMessage: "Add labels",
-  },
-  titlePlaceholder: {
-    id: `${prefix}.titlePlaceholder`,
-    defaultMessage: "Please input message title name",
-  },
-  message: {
-    id: `${prefix}.message`,
-    defaultMessage: "Message",
-  },
-  textAreaInputPlaceholder: {
-    id: `${prefix}.textAreaInputPlaceholder`,
-    defaultMessage: "Please input in-app notification message content",
-  },
-  addActionLink: {
-    id: `${prefix}.addActionLink`,
-    defaultMessage: 'Add action link to content',
-  },
-  addActionLinkDesc: {
-    id: `${prefix}.addActionLinkDesc`,
-    defaultMessage: 'Add a deep link of the page which customer will be directed to',
-  },
-  select: {
-    id: `${prefix}.select`,
-    defaultMessage: "Select",
-  },
-  mediaLabel: {
-    id: `${prefix}.mediaLabel`,
-    defaultMessage: "Media",
-  },
-  mediaText: {
-    id: `${prefix}.mediaText`,
-    defaultMessage: "Text",
-  },
-  mediaImage: {
-    id: `${prefix}.mediaImage`,
-    defaultMessage: "Image",
-  },
-  btnTypeNone: {
-    id: `${prefix}.btnTypeNone`,
-    defaultMessage: "None",
-  },
-  btnTypeCTA: {
-    id: `${prefix}.btnTypeCTA`,
-    defaultMessage: "Call to action",
-  },
-  ctaDesc: {
-    id: `${prefix}.ctaDesc`,
-    defaultMessage:
-      "Create a button that lets customers take an action",
-  },
-  emptyTemplateMessageErrorMessage: {
-    id: `${prefix}.emptyTemplateMessageErrorMessage`,
-    defaultMessage: "Template message cannot be empty",
-  },
-  templateMessageLabel: {
-    id: `${prefix}.templateMessageLabel`,
-    defaultMessage: 'Message',
-  },
-  btnDisabledTooltip: {
-    id: `${prefix}.btnDisabledTooltip`,
-    defaultMessage: 'Please add all mandatory fields to proceed further',
-  },
-  btnLabel: {
-    id: `${prefix}.btnLabel`,
-    defaultMessage: 'Buttons',
-  },
-  btnDesc: {
-    id: `${prefix}.btnDesc`,
-    defaultMessage: 'These will be show clickable buttons below your message.',
-  },
-  optional: {
-    id: `${prefix}.optional`,
-    defaultMessage: '(Optional)',
-  },
-  actionDeepLink: {
-    id: `${prefix}.actionDeepLink`,
-    defaultMessage: 'Deep Link',
-  },
-  deepLinkOptionsPlaceholder: {
-    id: `${prefix}.deepLinkOptionsPlaceholder`,
-    defaultMessage: 'Select deep link',
-  },
-  coverImage: {
-    id: `${prefix}.coverImage`,
-    defaultMessage: 'Cover image',
-  },
-});

package/v2Components/CapDeviceContent/tests/index.test.js

@@ -1,75 +0,0 @@
-import React from 'react';
-import { injectIntl } from 'react-intl';
-import { browserHistory } from 'react-router';
-import '@testing-library/jest-dom';
-import { Provider } from 'react-redux';
-import configureStore from '../../../store';
-import CapDeviceContent from '../index';
-import { render, screen, fireEvent } from '../../../utils/test-utils';
-import { deviceContentProps } from '../../../v2Containers/InApp/tests/mockData';
-
-
-let store;
-beforeAll(() => {
-  store = configureStore({}, browserHistory);
-});
-
-const ComponentToRender = injectIntl(CapDeviceContent);
-const renderComponent = (props) =>
-  render(
-    <Provider store={store}>
-      <ComponentToRender {...props} />
-    </Provider>,
-  );
-
-describe('Test CapDeviceContent', () => {
-  it('test case for CapDeviceContent component Android pane', async () => {
-    renderComponent(deviceContentProps);
-    const msgBox = screen.getAllByPlaceholderText(/Please input in-app notification message content/i);
-    fireEvent.change(msgBox[0], 'val');
-    const copyLink = screen.getByRole('link', {
-      name: /copy title and content from ios/i,
-    });
-    fireEvent.click(copyLink);
-    expect(copyLink).toBeInTheDocument();
-  });
-  it('test case for CapDeviceContent component Ios pane', () => {
-    renderComponent(
-      {...deviceContentProps,
-        panes: "iOS",
-        buttonType: 'CTA',
-        setTemplateMediaType: jest.fn(),
-        setButtonType: jest.fn(),
-        setCtaData: jest.fn(),
-        setTemplateMessage: jest.fn(),
-        setTemplateMessageError: jest.fn(),
-        setTitle: jest.fn(),
-        templateMediType: 'IMAGE',
-        addActionLink: true,
-        ctaData: [
-          {
-            index: 0,
-            ctaType: "WEBSITE",
-            text: "test",
-            urlType: "DEEP_LINK",
-            url: "",
-            isSaved: true,
-            label: "Test_1",
-          },
-        ] });
-    const msgBox = screen.getAllByPlaceholderText(/Please input in-app notification message content/i);
-    msgBox[0].focus();
-    fireEvent.change(msgBox[0], { target: {value: 'val'}});
-    fireEvent.change(msgBox[0], { target: {value: ''}});
-    const titleBox = screen.getAllByPlaceholderText(/Please input message title name/i);
-    titleBox[0].focus();
-    fireEvent.change(titleBox[0], { target: {value: 'val'}});
-    const img = screen.getByText(/image/i);
-    fireEvent.click(img);
-    const none = screen.getByText(/None/i);
-    fireEvent.click(none);
-    const editIcon = screen.getByText(/Test_1/i).nextSibling.firstChild;
-    fireEvent.click(editIcon);
-    expect(screen.getByText(/Test_1/i)).toBeInTheDocument();
-  });
-});

package/v2Components/CapInAppCTA/constants.js

@@ -1,25 +0,0 @@
-import React from 'react';
-import { FormattedMessage } from 'react-intl';
-import messages from './messages';
-
-export const DEEP_LINK = 'DEEP_LINK';
-export const EXTERNAL_LINK = 'EXTERNAL_LINK';
-export const WEBSITE = 'WEBSITE';
-
-export const CTA_OPTIONS = [
-  {
-    key: DEEP_LINK,
-    value: DEEP_LINK,
-    label: <FormattedMessage {...messages.ctaLinkTypeDeep} />,
-    tooltipLabel: <FormattedMessage {...messages.ctaOptionDisabledTooltipDeepLink} />,
-  },
-  {
-    key: EXTERNAL_LINK,
-    value: EXTERNAL_LINK,
-    label: <FormattedMessage {...messages.ctaLinkTypeExternal} />,
-    tooltipLabel: <FormattedMessage {...messages.ctaOptionDisabledTooltipExternalLink} />,
-  },
-];
-
-export const BTN_MAX_LENGTH = 20;
-export const URL_MAX_LENGTH = 2000;