@capillarytech/creatives-library 7.18.0-beta.0 → 8.0.0

package/utils/tests/common.test.js

@@ -0,0 +1,273 @@
+import React from 'react';
+import Bugsnag from '@bugsnag/js';
+import { FormattedMessage } from 'react-intl';
+import "@testing-library/jest-dom";
+import {
+  filterTags,
+  getTreeStructuredTags,
+  handleInjectedData,
+  intlKeyGenerator,
+  bytes2Size,
+  getUserNameById,
+  iframePreviewAdjustWidth,
+  getDecodedFileName
+} from "../common";
+import * as mockdata from "./common.mockdata";
+
+describe("getTreeStructuredTags test", () => {
+  it("test for getTreeStructuredTags when tagsList is not empty", () => {
+    expect(getTreeStructuredTags({ tagsList: mockdata.tagsList })).toEqual(mockdata.output1);
+  });
+  it("test for getTreeStructuredTags when tagsList is empty", () => {
+    expect(getTreeStructuredTags({ tagsList: [] })).toEqual([]);
+  });
+
+  it("test for getTreeStructuredTags when incentive attached is BADGES", () => {
+    expect(getTreeStructuredTags({ tagsList: mockdata.badgesTags, offerDetails: mockdata.offer })).toEqual(mockdata.expectedOffer);
+  });
+  it("test for filterTags", () => {
+    expect(filterTags(mockdata.tagsToFilter, mockdata.tagsList)).toEqual([mockdata.tagsList[1]]);
+  });
+  it("test for filterTags when tagsToFilter and tagsList is empty", () => {
+    expect(filterTags([], [])).toEqual([]);
+  });
+  it("test for getTreeStructuredTags when incentive attached is offer", () => {
+    expect(getTreeStructuredTags({ tagsList: mockdata.OfferTag, offerDetails: [{ id: '12', couponName: 'mac' }] })).toEqual(mockdata.offerOutput);
+  });
+});
+
+describe("getUserNameById test", () => {
+  it("test for username is available or not", () => {
+    const data = [
+      {
+        userId: 1,
+        firstName: 'test1',
+        lastName: 'test2',
+
+      },
+      {
+        userId: 2,
+        firstName: 'test3',
+        lastName: 'test4',
+
+      },
+    ];
+    const expected = 'test1 test2';
+    expect(getUserNameById(1, data)).toEqual(expected);
+  });
+});
+
+describe("handleInjectedData", () => {
+  it("replaces name with intl key for top level tag", () => {
+    const data = {
+      tag1: {
+        name: "Registration Fields",
+      },
+    };
+
+    const result = handleInjectedData(data, "scope");
+    const intlKey = intlKeyGenerator("scope");
+    expect(intlKey).toEqual('scope');
+    expect(result.tag1.name).toEqual(<FormattedMessage defaultMessage="Registration Fields" id="scope.registration_fields" values={{}} />);
+  });
+
+  it("adds tagType for Registration custom fields", () => {
+    const data = {
+      tag1: {
+        name: "Registration custom fields",
+      },
+    };
+
+    const result = handleInjectedData(data, "scope");
+    const intlKey = intlKeyGenerator();
+    expect(intlKey).toEqual('');
+    expect(result.tag1.name).toEqual(
+      <FormattedMessage defaultMessage="Registration custom fields" id="scope.registration_custom_fields_name.CustomTagMessage" values={{}} />
+    );
+  });
+
+  it("adds tagType for Customer extended fields fields", () => {
+    const data = {
+      tag1: {
+        name: "Customer extended fields",
+      },
+    };
+
+    const result = handleInjectedData(data, "scope");
+
+    expect(result.tag1.name).toEqual(
+      <FormattedMessage defaultMessage="Customer extended fields" id="scope.customer_extended_fields_name.ExtendedTagMessage" values={{}} />
+    );
+  });
+  it("adds tagType for Customer extended fields fields", () => {
+    const data = {
+      tag1: {
+      },
+    };
+
+    const result = handleInjectedData(data, "scope");
+
+    expect(result.tag1.name).toEqual(undefined);
+  });
+
+  it("adds tagType for Customer with  extended fields fields", () => {
+    const data = {
+      tag1: {
+        name: "mahaRaja",
+        subtag1: {
+          name: "First Name",
+        },
+      },
+    };
+
+    const result = handleInjectedData(data, "scope");
+
+    expect(result.tag1.subtag1.name).toEqual("First Name");
+  });
+  it("replaces subtag name with intl key", () => {
+    const data = {
+      tag1: {
+        subtags: {
+          subtag1: {
+            name: "First Name",
+            hasOwnProperty: jest.fn(),
+          },
+          hasOwnProperty: jest.fn(),
+        },
+      },
+    };
+
+    const result = handleInjectedData(data, "scope");
+
+    expect(result.tag1.subtags.subtag1.name).toEqual("First Name");
+  });
+
+  it("replaces subtag name with intl key test", () => {
+    const data = {
+      tag1: {
+        subtags: {
+          subtag1: {
+            name: "First Name",
+            hasOwnProperty: jest.fn(),
+          },
+        },
+      },
+      hasOwnProperty: jest.fn(),
+    };
+
+    const result = handleInjectedData(data, "scope");
+
+    expect(result.tag1.subtags.subtag1.name).toEqual("First Name");
+  });
+
+  it("replaces subtag desc with intl key", () => {
+    const data = {
+      tag1: {
+        subtags: {
+          subtag1: {
+            desc: "Enter your first name",
+          },
+        },
+      },
+    };
+
+    const result = handleInjectedData(data, "scope");
+
+    expect(result.tag1.subtags.subtag1.desc).toEqual(
+      <FormattedMessage defaultMessage="Enter your first name" id="scope.enter_your_first_name" values={{}} />
+    );
+  });
+  it("replaces subtag name desc with intl key", () => {
+    const data = {
+      tag1: {
+        subtags: {
+          subtag1: {
+            name: "mahaRaja",
+            desc: "Enter your first name",
+          },
+        },
+      },
+    };
+
+    const result = handleInjectedData(data, "scope");
+
+    expect(result.tag1.subtags.subtag1.desc).toEqual(
+      <FormattedMessage defaultMessage="Enter your first name" id="scope.enter_your_first_name" values={{}} />
+    );
+  });
+});
+
+describe('bytes2Size', () => {
+  it('should convert bytes to the correct size string', () => {
+    // Test cases with different byte values
+    expect(bytes2Size(0)).toBe('0 Bytes');
+    expect(bytes2Size(1023)).toBe('1023 Bytes');
+    expect(bytes2Size(1024)).toBe('1 KB');
+    expect(bytes2Size(1048576)).toBe('1 MB');
+    expect(bytes2Size(1099511627776)).toBe('1 TB');
+    expect(bytes2Size(1125899906842624)).toBe('1 PB');
+    expect(bytes2Size(1152921504606846976)).toBe('1 EB');
+    expect(bytes2Size(1180591620717411303424)).toBe('1 ZB');
+    expect(bytes2Size(Number.MAX_SAFE_INTEGER)).toBe('8 PB'); // Test with the maximum safe integer value
+  });
+
+  it('should handle negative decimals', () => {
+    // Test with negative decimal values
+    expect(bytes2Size(1024, -1)).toBe('1 KB'); // Decimals < 0 should round to 0
+    expect(bytes2Size(1024, -2)).toBe('1 KB');
+    expect(bytes2Size(1024, -3)).toBe('1 KB');
+  });
+});
+
+describe('iframeAdjustWidth', () => {
+  it("should Add the width in iframe image", () => {
+    const data = [
+      <head>
+        <meta httpEquiv="Content-Type" content="text/html; charset=utf-8">
+          <meta name="viewport" content="width=device-width">
+          </meta></meta></head>,
+
+    ];
+    expect(iframePreviewAdjustWidth(data)).toBe("<html><head></head><body>[object Object]</body></html>");
+  });
+});
+
+describe('getDecodedFileName function', () => {
+  it('Returns an empty string when templateName is undefined', () => {
+    expect(getDecodedFileName()).toEqual('');
+  });
+
+  it('Returns the decoded filename from encoded filename', () => {
+    expect(getDecodedFileName('%24Test.jpeg')).toEqual('$Test.jpeg');
+    expect(getDecodedFileName('cap%24.logo.%23.jpg')).toEqual('cap$.logo.#.jpg');
+    expect(getDecodedFileName("%24L_i%40n%26e__%60AL%60L%2BI'ma_g__e%2Bco_pyAI____Copy____Copy_wek1SeS0.jpg")).toEqual("$L_i@n&e__`AL`L+I'ma_g__e+co_pyAI____Copy____Copy_wek1SeS0.jpg");
+    expect(getDecodedFileName('test.jpeg')).toEqual('test.jpeg');
+  });
+
+  it('Returns the original filename when decoding fails due to URIError', () => {
+    const fileName = '@Test%ZZ.jpeg';
+    expect(getDecodedFileName(fileName)).toEqual(fileName);
+  });
+
+  it('Returns the original filename and notifies Bugsnag for other decoding errors', () => {
+    // Mocking Bugsnag methods for testing
+    const originalLeaveBreadcrumb = Bugsnag.leaveBreadcrumb;
+    const originalNotify = Bugsnag.notify;
+    Bugsnag.leaveBreadcrumb = jest.fn();
+    Bugsnag.notify = jest.fn((error, callback) => {
+      const event = {};
+      callback(event);
+      expect(event.severity).toEqual("error");
+    });
+    const fileName = '@Test%20ZZ.jpg';
+    const error = new Error('Some other decoding error');
+    // Mocking decodeURIComponent to throw the error
+    global.decodeURIComponent = jest.fn(() => { throw error; });
+
+    expect(getDecodedFileName(fileName)).toEqual(fileName);
+    expect(Bugsnag.notify).toHaveBeenCalled();
+    // Restoring original Bugsnag methods
+    Bugsnag.leaveBreadcrumb = originalLeaveBreadcrumb;
+    Bugsnag.notify = originalNotify;
+  });
+});

package/utils/tests/commonUtil.test.js

@@ -0,0 +1,79 @@
+import "@testing-library/jest-dom";
+import { getTreeStructuredTags } from "../common";
+import * as mockdata from "./common.mockdata";
+import { addBaseToTemplate } from "../commonUtils";
+
+jest.mock('@capillarytech/cap-ui-utils', () => ({
+  Auth: {
+    hasAccess: () => jest.fn(() => true),
+    hasFeatureAccess: () => jest.fn(() => true),
+    authHoc: jest.fn(),
+    initialize: jest.fn(),
+  },
+}));
+
+describe("common utils test", () => {
+  it("test for getTreeStructuredTags when tagsList is not empty", () => {
+    expect(getTreeStructuredTags({tagsList: mockdata.tagsList})).toEqual(mockdata.output2);
+  });
+  it("test for getTreeStructuredTags when tagsList is empty", () => {
+    expect(getTreeStructuredTags({tagsList: []})).toEqual([]);
+  });
+});
+
+describe('addBaseToTemplate', () => {
+  it('should add the first item in history as base if history exists', () => {
+    const template = {
+      versions: {
+        history: ['v1', 'v2', 'v3'],
+      },
+    };
+    const expected = {
+      versions: {
+        history: ['v1', 'v2', 'v3'],
+        base: 'v1',
+      },
+    };
+    expect(addBaseToTemplate(template)).toEqual(expected);
+  });
+
+  it('should return the original template if history is empty', () => {
+    const template = {
+      versions: {
+        history: [],
+      },
+    };
+    expect(addBaseToTemplate(template)).toEqual(template);
+  });
+
+  it('should return the original template if history is undefined', () => {
+    const template = {
+      versions: {},
+    };
+    expect(addBaseToTemplate(template)).toEqual(template);
+  });
+
+  it('should return the original template if versions is undefined', () => {
+    const template = {};
+    expect(addBaseToTemplate(template)).toEqual(template);
+  });
+
+  it('should handle null input gracefully', () => {
+    expect(addBaseToTemplate(null)).toBeNull();
+  });
+
+  it('should handle undefined input gracefully', () => {
+    expect(addBaseToTemplate(undefined)).toBeUndefined();
+  });
+
+  it('should not modify the original template object', () => {
+    const template = {
+      versions: {
+        history: ['v1', 'v2', 'v3'],
+      },
+    };
+    const originalTemplateCopy = JSON.parse(JSON.stringify(template));
+    addBaseToTemplate(template);
+    expect(template).toEqual(originalTemplateCopy);
+  });
+});

package/v2Components/CapDeviceContent/index.js

@@ -0,0 +1,330 @@
+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 CapColumn from "@capillarytech/cap-ui-library/CapColumn";
+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,
+  BUTTON_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,
+    templateDescErrorHandler,
+    templateTitleError,
+    setTemplateTitleError,
+  } = 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 = templateDescErrorHandler(value);
+    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 onTitleChange = ({ target: { value } }) => {
+    let error = templateDescErrorHandler(value);
+    if (value === '') {
+      error = formatMessage(messages.emptyTemplateMessageErrorMessage);
+    }
+    setTitle(value);
+    setTemplateTitleError(error);
+  };
+
+  const onTemplateMediaTypeChange = ({ target: { value } }) => {
+    setTemplateMediaType(value);
+  };
+
+  const onChangeButtonType = ({ target: { value } }) => {
+    setButtonType(value);
+    setCtaData(INITIAL_CTA_DATA);
+  };
+
+  const onActionLinkCheckBoxChange = () => {
+    setAddActionLink(!addActionLink);
+    setDeepLinkValue('');
+  };
+
+  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 (
+    <>
+      <CapRow className="creatives-device-content">
+        <CapLink
+          title={isAndroid
+              ? formatMessage(messages.copyContentFromIOS)
+              : formatMessage(messages.copyCotentFromAndroid)}
+          className="inapp-copy-content"
+          onClick={onCopyTitleAndContent}
+          />
+        <CapRow className="creatives-inapp-title">
+          <CapColumn
+            className="inapp-content-main"
+          >
+            <CapHeading type="h5" className="inapp-title">
+              {formatMessage(messages.title)}
+            </CapHeading>
+            {getTagList(0)} {/* here 0 signifies the tags for template title */}
+          </CapColumn>
+          <CapInput
+            id="inapp-title-name-input"
+            onChange={onTitleChange}
+            placeholder={formatMessage(messages.titlePlaceholder)}
+            value={title}
+            size="default"
+            isRequired
+            errorMessage={templateTitleError && (
+              <CapError className="inapp-template-message-error">
+                {templateTitleError}
+              </CapError>
+            )}
+          />
+        </CapRow>
+        <CapRow className="creatives-inapp-media">
+          <CapRow 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"
+            />
+          </CapRow>
+        </CapRow>
+        <CapRow className={`creatives-inapp-message ${!isMediaTypeImage && "message-bottom-margin"}`}>
+          <CapColumn
+            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 */}
+          </CapColumn>
+          <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}
+              />
+            </>
+          )}
+        </CapRow>
+      </CapRow>
+      <CapRow className="inapp-action-link">
+        <CapCheckbox onChange={onActionLinkCheckBoxChange} checked={addActionLink} />
+        <CapRow 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 && (
+            <CapRow 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); }}
+              />
+            </CapRow>
+          )}
+        </CapRow>
+      </CapRow>
+      <CapRow 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={BUTTON_RADIO_OPTIONS}
+          value={buttonType}
+          onChange={onChangeButtonType}
+          disabled={!isAndroid}
+          className="inapp-btn-radio-group"
+        />
+        {isBtnTypeCta && (
+          <CapInAppCTA
+            ctaData={ctaData}
+            updateHandler={updateHandler}
+            deleteHandler={deleteHandler}
+            isEditFlow={isEditFlow}
+            deepLink={deepLink || []}
+          />
+        )}
+      </CapRow>
+    </>
+  );
+};
+
+CapDeviceContent.propTypes = {
+  intl: intlShape.isRequierd,
+  location: PropTypes.string,
+  injectedTags: PropTypes.object,
+  selectedOfferDetails: PropTypes.array,
+  panes: PropTypes.string,
+};
+
+export default injectIntl(CapDeviceContent);