@capillarytech/creatives-library 7.17.91 → 7.17.92

package/index.js

@@ -95,6 +95,10 @@ import Zalo from './v2Containers/Zalo';
 import zaloReducer from './v2Containers/Zalo/reducer';
 import zaloSaga from './v2Containers/Zalo/saga';
 
+import InApp from './v2Containers/InApp';
+import inAppReducer from './v2Containers/InApp/reducer';
+import inAppSaga from './v2Containers/InApp/sagas';
+
 import Rcs from './v2Containers/Rcs';
 import rcsReducer from './v2Containers/Rcs/reducer';
 import rcsSaga from './v2Containers/Rcs/sagas';
@@ -126,6 +130,7 @@ const SmsTraiContainer = {SmsTraiCreate, SmsTraiCreateReducer, SmsTraiCreateSaga
 const WhatsappContainer = { Whatsapp, whatsappReducer, whatsappSaga };
 const RcsContainer = { Rcs, rcsReducer, rcsSaga };
 const ZaloContainer = { Zalo, zaloReducer, zaloSaga };
+const InAppContainer = { InApp, inAppReducer, inAppSaga };
 
 const GalleryContainer = {Gallery, galleryReducer, gallerySagas};
 const FTPContainer = {FTP, FTPReducer, FTPSagas};
@@ -175,4 +180,5 @@ export { CapContainer,
   WhatsappContainer,
   RcsContainer,
   ZaloContainer,
+  InAppContainer,
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "7.17.91",
+  "version": "7.17.92",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",

package/routes.js

@@ -665,6 +665,8 @@ export default function createRoutes(store) {
           import('v2Containers/Whatsapp/reducer'),
           import('v2Containers/Zalo/saga'),
           import('v2Containers/Zalo/reducer'),
+          import('v2Containers/InApp/sagas'),
+          import('v2Containers/InApp/reducer'),
           import('v2Containers/Rcs/sagas'),
           import('v2Containers/Rcs/reducer'),
         ]);
@@ -692,6 +694,7 @@ export default function createRoutes(store) {
           smsTraiSagas, smsTraiReducer,
           whatsappSagas, whatsappReducer,
           zaloSagas, zaloReducer,
+          inAppSagas, inAppReducer,
           rcsSagas, rcsReducer,
         ]) => {
           injectReducer('templates', reducer.default);
@@ -714,6 +717,7 @@ export default function createRoutes(store) {
           injectReducer('smsTrai', smsTraiReducer.default);
           injectReducer('whatsapp', whatsappReducer.default);
           injectReducer('zalo', zaloReducer.default);
+          injectReducer('inapp', inAppReducer.default);
           injectReducer('rcs', rcsReducer.default);
           injectSagas(gallerySagas.default);
           injectSagas(sagas.default);
@@ -735,6 +739,7 @@ export default function createRoutes(store) {
           injectSagas(smsTraiSagas.default);
           injectSagas(whatsappSagas.default);
           injectSagas(zaloSagas.default);
+          injectSagas(inAppSagas.default);
           injectSagas(rcsSagas.default);
           renderRoute(component);
         });

package/services/api.js

@@ -237,6 +237,11 @@ export const createMobilePushTemplate = ({template}) => {
   return request(url, getAPICallObject('POST', template));
 };
 
+export const createInAppTemplate = ({payload}) => {
+  const url = `${API_ENDPOINT}/templates/INAPP`;
+  return request(url, getAPICallObject('POST', payload));
+};
+
 export const duplicateTemplate = ({id, channel}) => {
   const url = `${API_ENDPOINT}/templates/duplicate/${id}/${channel}`;
   return request(url, getAPICallObject('GET'));

package/v2Components/CapDeviceContent/index.js

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

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

@@ -0,0 +1,107 @@
+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',
+  },
+});