@capillarytech/creatives-library 7.17.91 → 7.17.92

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

@@ -0,0 +1,75 @@
+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/CapImageUpload/index.js

@@ -20,7 +20,7 @@ import { injectIntl, FormattedMessage, intlShape} from 'react-intl';
 import { isEmpty, get } from 'lodash';
 import './index.scss';
 import Gallery from '../../v2Containers/Assets/Gallery';
-import { FACEBOOK, RCS, WHATSAPP } from "../../v2Containers/CreativesContainer/constants";
+import { FACEBOOK, INAPP, RCS, WHATSAPP } from "../../v2Containers/CreativesContainer/constants";
 
 import messages from './messages';
 function CapImageUpload(props) {
@@ -252,7 +252,7 @@ function CapImageUpload(props) {
             </CapHeadingSpan>
           </>
         )}
-        {channel !== WHATSAPP && (
+        {![WHATSAPP, INAPP].includes(channel) && (
           <CapHeadingSpan type="label2" className="image-dimension">
             <FormattedMessage {...messages.imageDimenstionDescription} values={{ width: imgWidth, height: imgHeight }} />
           </CapHeadingSpan>
@@ -267,8 +267,15 @@ function CapImageUpload(props) {
             <FormattedMessage {...messages.imageSize} />
           </CapHeadingSpan>
         )}
+        {
+          channel === INAPP && (
+            <CapHeadingSpan type="label2" className="image-size">
+              <FormattedMessage {...messages.whatsappImageSize} />
+            </CapHeadingSpan>
+          )
+        }
         <CapHeadingSpan type="label2" className="image-format">
-          <FormattedMessage {...messages.format} />
+          {channel === INAPP ? <FormattedMessage {...messages.format2} /> : <FormattedMessage {...messages.format} />}
         </CapHeadingSpan>
       </div>
     </div>

package/v2Components/CapImageUpload/messages.js

@@ -42,6 +42,10 @@ export default defineMessages({
     id: `${scope}.format`,
     defaultMessage: 'Format: JPEG, JPG, PNG',
   },
+  format2: {
+    id: `${scope}.format2`,
+    defaultMessage: 'Format: png, jpg, jpeg',
+  },
   imageErrorDesc: {
     id: `${scope}.imageErrorDesc`,
     defaultMessage:

package/v2Components/CapInAppCTA/constants.js

@@ -0,0 +1,25 @@
+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;

package/v2Components/CapInAppCTA/index.js

@@ -0,0 +1,281 @@
+import React, { useState } from "react";
+import { injectIntl } from "react-intl";
+import "react-phone-input-2/lib/style.css";
+import cloneDeep from "lodash/cloneDeep";
+import CapHeading from "@capillarytech/cap-ui-library/CapHeading";
+import CapColumn from "@capillarytech/cap-ui-library/CapColumn";
+import CapInput from "@capillarytech/cap-ui-library/CapInput";
+import CapButton from "@capillarytech/cap-ui-library/CapButton";
+import CapRow from "@capillarytech/cap-ui-library/CapRow";
+import CapLabel from "@capillarytech/cap-ui-library/CapLabel";
+import CapIcon from "@capillarytech/cap-ui-library/CapIcon";
+import CapTooltip from "@capillarytech/cap-ui-library/CapTooltip";
+import CapTooltipWithInfo from "@capillarytech/cap-ui-library/CapTooltipWithInfo";
+import CapSelect from "@capillarytech/cap-ui-library/CapSelect";
+import CapTag from '@capillarytech/cap-ui-library/CapTag';
+import { CAP_SPACE_04 } from "@capillarytech/cap-ui-library/styled/variables";
+import globalMessages from "../../v2Containers/Cap/messages";
+import inAppMsg from "../../v2Containers/InApp/messages";
+import messages from "./messages";
+import './index.scss';
+import {
+  isUrl,
+  isValidText,
+} from "../../v2Containers/Line/Container/Wrapper/utils";
+import {
+  BTN_MAX_LENGTH,
+  DEEP_LINK,
+  EXTERNAL_LINK,
+  CTA_OPTIONS,
+  URL_MAX_LENGTH,
+} from "./constants";
+
+export const CapInAppCTA = (props) => {
+  const {
+    intl,
+    ctaData = [],
+    updateHandler,
+    deleteHandler,
+    isEditFlow,
+    deepLink,
+  } = props;
+  const { formatMessage } = intl;
+
+  const [urlError, setUrlError] = useState(false);
+  const [buttonError, setButtonError] = useState(false);
+  const [ctaDeepLinkValue, setCtaDeepLinkValue] = useState("");
+
+  const updateHelper = (type, value, index) => {
+    let clonedCta = cloneDeep(ctaData[index]);
+    clonedCta = {
+      ...clonedCta,
+      [type]: value,
+    };
+    updateHandler(clonedCta, index);
+  };
+
+  const renderLength = (len, max) => (
+    <CapHeading
+      type="label1"
+      className="inapp-render-btn-length"
+    >
+      {formatMessage(inAppMsg.templateMessageLength, {
+        currentLength: len,
+        maxLength: max,
+      })}
+    </CapHeading>
+  );
+
+
+  const onButtonTextChange = ({ target }) => {
+    const { value, id } = target;
+    let errorMessage = "";
+    if (!isValidText(value)) {
+      errorMessage = formatMessage(messages.ctaButtonErrorMessage);
+    }
+    setButtonError(errorMessage);
+    updateHelper("text", value, id);
+  };
+
+  const onUrlTypeChange = (value, index) => {
+    updateHelper('urlType', value, index);
+  };
+
+  const onUrlChange = ({ target }) => {
+    const { value} = target;
+    let errorMessage = false;
+    if (!isUrl(value)) {
+      errorMessage = formatMessage(messages.ctaWebsiteUrlErrorMessage);
+    }
+    setUrlError(errorMessage);
+    updateHelper('url', value, 0); // 0 is an index
+  };
+
+  const onDeepLinkSelect = (value) => {
+    setCtaDeepLinkValue(value);
+    let errorMessage = false;
+    if (!isUrl(value.key)) {
+      errorMessage = formatMessage(messages.ctaWebsiteUrlErrorMessage);
+    }
+    setUrlError(errorMessage);
+    updateHelper('url', value.key, 0); // 0 is an index
+    updateHelper('label', value.label, 0); // 0 is an index
+  };
+
+  const ctaSaveDisabled = (index) => {
+    const { urlType, text, url } = ctaData[index] || {};
+    if (text === "" || buttonError) {
+      return true;
+    } else if (urlType === DEEP_LINK && (ctaDeepLinkValue === "" || urlError)) {
+      return true;
+    } else if (urlType === EXTERNAL_LINK && (url === "" || urlError)) {
+      return true;
+    }
+  };
+
+  const isSavedCta = (index, saved) => {
+    updateHelper("isSaved", saved, index);
+  };
+
+  const renderedContent = () => {
+    const renderArray = [];
+    ctaData?.forEach((cta) => {
+      const { index, text, url, urlType, isSaved, label } = cta || {};
+      //this is to display buttons after they are saved, in both create and edit mode.
+      if (isSaved) {
+        renderArray.push(
+          <CapRow
+            className="cap-inapp-saved-cta"
+            align="middle"
+            type="flex"
+          >
+            <CapRow className="inapp-cta-row">
+              <CapColumn>
+                <CapIcon size="s" type={'launch'} />
+              </CapColumn>
+              <CapColumn>
+                <CapLabel type="label2" className="inapp-saved-cta-button-text">
+                  {text}
+                </CapLabel>
+              </CapColumn>
+            </CapRow>
+            <CapColumn >
+              {urlType === DEEP_LINK ?
+                <CapTag className="cta-type-label">{formatMessage(messages.urlDeepLink)}</CapTag>
+                : <CapTag className="cta-type-label">{formatMessage(messages.urlExternalLink)}</CapTag>}
+            </CapColumn>
+            <CapColumn>
+              {urlType === DEEP_LINK ? label : ''}
+            </CapColumn>
+            {(
+              <CapRow className="cta-action-grp">
+                <CapColumn
+                  className="inapp-saved-cta-edit-icon"
+                  onClick={() => isSavedCta(index, false)}
+                >
+                  <CapIcon size="s" type="edit" className="cta-action" />
+                </CapColumn>
+                <CapColumn onClick={() => deleteHandler(index)} className="cta-del-icon">
+                  <CapIcon size="s" type="delete" className="cta-action" ariaLabel="delete-cta-icon" />
+                </CapColumn>
+              </CapRow>
+            )}
+          </CapRow>
+        );
+      } else {
+        //this is to display buttons before they are saved, only in create mode.
+        renderArray.push(
+          <CapRow
+            className="cap-inapp-cta"
+            id={`cap-inapp-cta-${index}`}
+          >
+            <CapRow className="inapp-cta-buttons">
+              <CapColumn span={12} >
+                {/* Type of link */}
+                <CapHeading type="h4" className="cta-label">
+                  {formatMessage(messages.ctaType)}
+                </CapHeading>
+                <CapSelect
+                  id="inapp-cta-type"
+                  options={CTA_OPTIONS || []}
+                  onChange={(value) => onUrlTypeChange(value, index)}
+                  value={urlType}
+                />
+              </CapColumn>
+              <CapColumn span={12}>
+                {/* Button text */}
+                <CapHeading type="h4" className="cta-label">
+                  {formatMessage(messages.ctaButtonText)}
+                  <CapTooltipWithInfo
+                    infoIconProps={{
+                      style: { marginLeft: CAP_SPACE_04 },
+                    }}
+                    autoAdjustOverflow
+                    placement="right"
+                    title={formatMessage(messages.ctaButtonTextTooltip)}
+                  />
+                </CapHeading>
+                <CapInput
+                  id={index}
+                  className="inapp-cta-button-text"
+                  onChange={onButtonTextChange}
+                  placeholder={formatMessage(messages.ctaButtonTextPlaceholder)}
+                  value={text}
+                  size="large"
+                  maxLength={BTN_MAX_LENGTH}
+                  errorMessage={buttonError}
+                />
+                {renderLength(text.length, BTN_MAX_LENGTH)}
+              </CapColumn>
+            </CapRow>
+            {urlType === DEEP_LINK && (
+              <>
+                <CapHeading type="h4">
+                  {formatMessage(messages.urlDeepLink)}
+                </CapHeading>
+                <CapSelect
+                  id="inapp-deep-link-type"
+                  placeholder={formatMessage(messages.ctaDeepLinkOptionsPlaceholder)}
+                  options={deepLink || []}
+                  onChange={onDeepLinkSelect}
+                  value={ctaDeepLinkValue}
+                  labelInValue
+                />
+              </>
+
+            )}
+            {urlType === EXTERNAL_LINK && (
+              <>
+                <CapHeading type="h4">
+                  {formatMessage(messages.urlExternalLink)}
+                </CapHeading>
+                <CapInput
+                  id="inapp-cta-external-link"
+                  className="inapp-cta-external-link"
+                  onChange={onUrlChange}
+                  placeholder={formatMessage(messages.ctaExternalLinkPlaceholder)}
+                  value={url}
+                  size="large"
+                  maxLength={URL_MAX_LENGTH}
+                  errorMessage={urlError}
+                />
+              </>
+            )}
+            <CapRow className="inapp-cta-save-delete-btn">
+              <CapTooltip
+                title={
+                  ctaSaveDisabled(index)
+                    ? formatMessage(messages.ctaSaveDisabled)
+                    : ""
+                }
+                placement={"bottom"}
+              >
+                <div className="button-disabled-tooltip-wrapper">
+                  <CapButton
+                    onClick={() => isSavedCta(index, true)}
+                    disabled={ctaSaveDisabled(index)}
+                    className="inapp-cta-save-btn"
+                  >
+                    {formatMessage(globalMessages.save)}
+                  </CapButton>
+                </div>
+              </CapTooltip>
+              <CapButton
+                onClick={() => deleteHandler(index)}
+                className="inapp-cta-delete-btn"
+                type="secondary"
+              >
+                {formatMessage(globalMessages.delete)}
+              </CapButton>
+            </CapRow>
+          </CapRow>
+        );
+      }
+    });
+    return renderArray;
+  };
+
+  return renderedContent();
+};
+
+export default injectIntl(CapInAppCTA);

package/v2Components/CapInAppCTA/index.scss

@@ -0,0 +1,93 @@
+@import '~@capillarytech/cap-ui-library/styles/_variables.scss';
+
+.cap-inapp-cta {
+    margin-top: $CAP_SPACE_16;
+    margin-left: 1.6rem;
+    padding: $CAP_SPACE_16 $CAP_SPACE_24;
+    border: 1px solid $CAP_G06;
+    border-radius: $CAP_SPACE_04;
+
+    .inapp-cta-buttons {
+        margin-top: $CAP_SPACE_12;
+
+        #inapp-cta-type {
+            width: 95%;
+        }
+
+        .inapp-cta-button-text {
+            width: 95%;
+        }
+
+        .inapp-render-btn-length {
+            margin-top: $CAP_SPACE_12;
+            width: 90%;
+            margin-left: 52%;
+            margin-bottom: $CAP_SPACE_12;
+        }
+    }
+
+    #inapp-deep-link-type {
+        width: 100%;
+        margin-top: $CAP_SPACE_12;
+    }
+
+    .inapp-cta-external-link {
+        margin-top: $CAP_SPACE_12;
+    }
+
+    .inapp-cta-save-delete-btn {
+        margin-top: $CAP_SPACE_16;
+
+        .inapp-cta-save-btn {
+            margin-right: $CAP_SPACE_04;
+        }
+        .inapp-cta-delete-btn {
+            margin-left: $CAP_SPACE_04;
+        }
+    }
+    
+}
+
+.cap-inapp-saved-cta {
+    border: solid 1px $CAP_G06;
+    margin-left: $CAP_SPACE_20;
+    display: flex;
+    justify-content: space-between;
+    padding: $CAP_SPACE_08 $CAP_SPACE_12;
+    border-radius: $CAP_SPACE_04;
+    margin-top: $CAP_SPACE_12;
+    height: $CAP_SPACE_40;
+
+    .inapp-saved-cta-button-text {
+        font-weight: 500;
+        padding-left: '15px'
+    }
+
+    .inapp-saved-cta-edit-icon {
+        margin-left: 4.286rem;
+    }
+}
+.cta-label {
+    margin-bottom: $CAP_SPACE_08;
+}
+.cta-type-label {
+    border-radius: 1rem;
+    background-color: $CAP_G08;
+    width: $CAP_SPACE_80;
+    height: $CAP_SPACE_24 !important;
+    align-items: center;
+    justify-content: center;
+}
+.cta-action {
+    cursor: pointer;
+}
+.inapp-cta-row {
+    display: flex;
+    align-items: center;
+}
+.cta-action-grp {
+    display: flex;
+}
+.cta-del-icon {
+    padding-left: 1rem;
+}

package/v2Components/CapInAppCTA/messages.js

@@ -0,0 +1,85 @@
+import { defineMessages } from 'react-intl';
+const prefix = `creatives.componentsV2.CapInAppCTA`;
+export default defineMessages({
+  ctaType: {
+    id: `${prefix}.ctaType`,
+    defaultMessage: 'Type of link',
+  },
+  urlDeepLink: {
+    id: `${prefix}.urlDeepLink`,
+    defaultMessage: 'Deep link',
+  },
+  urlExternalLink: {
+    id: `${prefix}.urlExternalLink`,
+    defaultMessage: 'External link',
+  },
+  ctaButtonText: {
+    id: `${prefix}.ctaButtonText`,
+    defaultMessage: 'Button text',
+  },
+  ctaDeepLinkOptionsPlaceholder: {
+    id: `${prefix}.ctaDeepLinkOptionsPlaceholder`,
+    defaultMessage: 'Select deep link',
+  },
+  ctaExternalLinkPlaceholder: {
+    id: `${prefix}.ctaExternalLinkPlaceholder`,
+    defaultMessage: 'Enter the external link',
+  },
+  ctaButtonTextPlaceholder: {
+    id: `${prefix}.ctaButtonTextPlaceholder`,
+    defaultMessage: 'Enter button text',
+  },
+  ctaWebsiteType: {
+    id: `${prefix}.ctaWebsiteType`,
+    defaultMessage: 'URL Type',
+  },
+  ctaLinkTypeDeep: {
+    id: `${prefix}.ctaLinkTypeDeep`,
+    defaultMessage: 'Deep link',
+  },
+  ctaLinkTypeExternal: {
+    id: `${prefix}.ctaLinkTypeExternal`,
+    defaultMessage: 'External link',
+  },
+  ctaWebsiteUrl: {
+    id: `${prefix}.ctaWebsiteUrl`,
+    defaultMessage: 'Website URL',
+  },
+  ctaStaticPlaceholder: {
+    id: `${prefix}.ctaStaticPlaceholder`,
+    defaultMessage: 'Enter website URL',
+  },
+  ctaWebsiteUrlErrorMessage: {
+    id: `${prefix}.ctaWebsiteUrlErrorMessage`,
+    defaultMessage: 'URL is not valid',
+  },
+  ctaButtonErrorMessage: {
+    id: `${prefix}.ctaButtonErrorMessage`,
+    defaultMessage: "Newlines, Emojis, or Special characters are not allowed",
+  },
+  ctaSaveDisabled: {
+    id: `${prefix}.ctaSaveDisabled`,
+    defaultMessage: 'Please complete the above fields to enable button',
+  },
+  ctaButtonTextTooltip: {
+    id: `${prefix}.ctaButtonTextTooltip`,
+    defaultMessage:
+      'Use this to name the button. We would recommend not to use special characters for the button text.',
+  },
+  ctaOptionDisabledTooltipDeepLink: {
+    id: `${prefix}.ctaOptionDisabledTooltipDeepLink`,
+    defaultMessage: 'A page within the mobile app',
+  },
+  ctaOptionDisabledTooltipExternalLink: {
+    id: `${prefix}.ctaOptionDisabledTooltipExternalLink`,
+    defaultMessage: 'An external web page',
+  },
+  staticUrlWithVarErrorMessage: {
+    id: `${prefix}.staticUrlWithVarErrorMessage`,
+    defaultMessage: 'Button with url type as static cannot contain variables',
+  },
+  useTwoBracketsOnly: {
+    id: `${prefix}.useTwoBracketsOnly`,
+    defaultMessage: 'Use two brackets on each side to declare a variable',
+  },
+});