@capillarytech/creatives-library 7.17.94 → 7.17.95

package/package.json

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

package/v2Components/CapDeviceContent/index.js

@@ -8,6 +8,7 @@ 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";
@@ -150,7 +151,7 @@ const CapDeviceContent = (props) => {
 
   return (
     <>
-      <div className="creatives-device-content">
+      <CapRow className="creatives-device-content">
         <CapLink
           title={isAndroid
               ? formatMessage(messages.copyContentFromIOS)
@@ -158,15 +159,15 @@ const CapDeviceContent = (props) => {
           className="inapp-copy-content"
           onClick={onCopyTitleAndContent}
           />
-        <div className="creatives-inapp-title">
-          <div
+        <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 */}
-          </div>
+          </CapColumn>
           <CapInput
             id="inapp-title-name-input"
             onChange={onTitleChange}
@@ -175,9 +176,9 @@ const CapDeviceContent = (props) => {
             size="default"
             isRequired
           />
-        </div>
-        <div className="creatives-inapp-media">
-          <div className="inapp-content-media">
+        </CapRow>
+        <CapRow className="creatives-inapp-media">
+          <CapRow className="inapp-content-media">
             <CapHeading type="h5" className="inapp-media-header">
               {formatMessage(messages.mediaLabel)}
             </CapHeading>
@@ -188,17 +189,17 @@ const CapDeviceContent = (props) => {
               onChange={onTemplateMediaTypeChange}
               className="inapp-media-radio"
             />
-          </div>
-        </div>
-        <div className={`creatives-inapp-message ${!isMediaTypeImage && "message-bottom-margin"}`}>
-          <div
+          </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 */}
-          </div>
+          </CapColumn>
           <TextArea
             id="inapp-create-template-message-input"
             className="inapp-create-template-message-input"
@@ -234,11 +235,11 @@ const CapDeviceContent = (props) => {
               />
             </>
           )}
-        </div>
-      </div>
-      <div className="inapp-action-link">
+        </CapRow>
+      </CapRow>
+      <CapRow className="inapp-action-link">
         <CapCheckbox onChange={() => setAddActionLink(!addActionLink)} checked={addActionLink} />
-        <div className="inapp-render-heading">
+        <CapRow className="inapp-render-heading">
           <CapHeader
             title={<CapRow type="flex">
               <CapHeading type="h4">
@@ -248,7 +249,7 @@ const CapDeviceContent = (props) => {
             description={<CapLabel type="label3">{formatMessage(messages.addActionLinkDesc)}</CapLabel>}
           />
           {addActionLink && (
-            <div className="inapp-action-deep-link">
+            <CapRow className="inapp-action-deep-link">
               <CapHeading type="h4">
                 {formatMessage(messages.actionDeepLink)}
               </CapHeading>
@@ -259,11 +260,11 @@ const CapDeviceContent = (props) => {
                 value={deepLinkValue}
                 onChange={(value) => { setDeepLinkValue(value); }}
               />
-            </div>
+            </CapRow>
           )}
-        </div>
-      </div>
-      <div className="inapp-cta-button">
+        </CapRow>
+      </CapRow>
+      <CapRow className="inapp-cta-button">
         <CapHeader
           className="inapp-render-heading-cta-button"
           title={<CapRow type="flex">
@@ -294,7 +295,7 @@ const CapDeviceContent = (props) => {
             deepLink={deepLink || []}
           />
         )}
-      </div>
+      </CapRow>
     </>
   );
 };

package/v2Components/CapDeviceContent/index.scss

@@ -48,7 +48,7 @@
         }
         .cap-custom-image-upload {
             .dragger-button.re-upload {
-                top: 28rem;
+                top: 12rem;
                 position: absolute;
                 right: $CAP_SPACE_20;
                 color: $FONT_COLOR_05;

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

@@ -33,37 +33,47 @@ describe('Test CapDeviceContent', () => {
     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);
+  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: "link",
+          isSaved: true,
+        },
+      ],
+      deepLink: [
+        {
+          label: "Test_1",
+          value: "link",
+        },
+      ],
+    });
+    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);
+    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'}});
+    fireEvent.change(titleBox[0], { target: { value: "val" } });
     const img = screen.getByText(/image/i);
     fireEvent.click(img);
     const none = screen.getByText(/None/i);

package/v2Components/CapInAppCTA/index.js

@@ -43,7 +43,8 @@ export const CapInAppCTA = (props) => {
 
   const [urlError, setUrlError] = useState(false);
   const [buttonError, setButtonError] = useState(false);
-  const [ctaDeepLinkValue, setCtaDeepLinkValue] = useState("");
+  const [ctaDeepLinkValue, setCtaDeepLinkValue] = useState(ctaData[0]?.url || "");
+  const selectedDeepLink = deepLink?.find(link => link?.value === ctaData[0]?.url);
 
   const updateHelper = (type, value, index) => {
     let clonedCta = cloneDeep(ctaData[index]);
@@ -94,12 +95,11 @@ export const CapInAppCTA = (props) => {
   const onDeepLinkSelect = (value) => {
     setCtaDeepLinkValue(value);
     let errorMessage = false;
-    if (!isUrl(value.key)) {
+    if (!isUrl(value)) {
       errorMessage = formatMessage(messages.ctaWebsiteUrlErrorMessage);
     }
     setUrlError(errorMessage);
-    updateHelper('url', value.key, 0); // 0 is an index
-    updateHelper('label', value.label, 0); // 0 is an index
+    updateHelper('url', value, 0); // 0 is an index
   };
 
   const ctaSaveDisabled = (index) => {
@@ -120,7 +120,7 @@ export const CapInAppCTA = (props) => {
   const renderedContent = () => {
     const renderArray = [];
     ctaData?.forEach((cta) => {
-      const { index, text, url, urlType, isSaved, label } = cta || {};
+      const { index, text, url, urlType, isSaved } = cta || {};
       //this is to display buttons after they are saved, in both create and edit mode.
       if (isSaved) {
         renderArray.push(
@@ -145,7 +145,7 @@ export const CapInAppCTA = (props) => {
                 : <CapTag className="cta-type-label">{formatMessage(messages.urlExternalLink)}</CapTag>}
             </CapColumn>
             <CapColumn>
-              {urlType === DEEP_LINK ? label : ''}
+              {urlType === DEEP_LINK ? selectedDeepLink?.label : ''}
             </CapColumn>
             {(
               <CapRow className="cta-action-grp">
@@ -219,7 +219,6 @@ export const CapInAppCTA = (props) => {
                   options={deepLink || []}
                   onChange={onDeepLinkSelect}
                   value={ctaDeepLinkValue}
-                  labelInValue
                 />
               </>
 

package/v2Containers/CreativesContainer/index.js

@@ -589,59 +589,16 @@ export class Creatives extends React.Component {
         }
         break;
       case constants.MOBILE_PUSH:
-        if (get(template, "value.versions.base")) {
-          const mobilpushTemplate = template.value;
-          templateData.accountId = get(mobilpushTemplate, 'definition.accountId');
-          const type = (get(this.props, "messageDetails.type") || '').toLowerCase();
-          if (type === LOYALTY) {
-            templateData.licenseCode = get(mobilpushTemplate, 'definition.licenseCode');
-            templateData.templateId = get(mobilpushTemplate, '_id');
-          }
-          const androidContent = get(mobilpushTemplate, 'versions.base.ANDROID');
-          if (!isEmpty(androidContent)) {
-            if (type !== LOYALTY) {
-              delete androidContent.cuid;
-              delete androidContent.luid;
-              delete androidContent.communicationId;
-            }
-            const custom = {};
-            forEach(androidContent.custom, (customKeyValue) => {
-              custom[customKeyValue.key] = customKeyValue.value;
-            } );
-            androidContent.custom = custom;
-            templateData.androidContent = androidContent;
-            templateData.androidContent.type = get(mobilpushTemplate, 'definition.mode', '').toUpperCase();
-            templateData.androidContent.deviceType = 'ANDROID';
-          }
-          const iosContent = get(mobilpushTemplate, 'versions.base.IOS');
-          if (!isEmpty(iosContent)) {
-            if (type !== LOYALTY) {
-              delete iosContent.cuid;
-              delete iosContent.luid;
-              delete iosContent.communicationId;
-            }
-            const custom = {};
-            forEach(iosContent.custom, (customKeyValue) => {
-              custom[customKeyValue.key] = customKeyValue.value;
-            } );
-            iosContent.custom = custom;
-            templateData.iosContent = iosContent;
-            templateData.iosContent.type = get(mobilpushTemplate, 'definition.mode').toUpperCase();
-            templateData.iosContent.deviceType = 'IOS';
-          }
-          templateData.messageSubject = mobilpushTemplate.name ? mobilpushTemplate.name : "messageSubject";
-        }
-        break;
       case constants.INAPP:
-        if (get(template, "value.versions.base.content")) {
-          const inAppTemplate = template.value;
-          templateData.accountId = get(inAppTemplate, 'definition.accountId');
+        if (get(template, "value.versions.base")) {
+          const channelTemplate = template.value;
+          templateData.accountId = get(channelTemplate, 'definition.accountId');
           const type = (get(this.props, "messageDetails.type") || '').toLowerCase();
           if (type === LOYALTY) {
-            templateData.licenseCode = get(inAppTemplate, 'definition.licenseCode');
-            templateData.templateId = get(inAppTemplate, '_id');
+            templateData.licenseCode = get(channelTemplate, 'definition.licenseCode');
+            templateData.templateId = get(channelTemplate, '_id');
           }
-          const androidContent = get(inAppTemplate, 'versions.base.content.ANDROID');
+          const androidContent = channel === constants.INAPP ? get(channelTemplate, 'versions.base.content.ANDROID') : get(channelTemplate, 'versions.base.ANDROID');
           if (!isEmpty(androidContent)) {
             if (type !== LOYALTY) {
               delete androidContent.cuid;
@@ -654,10 +611,10 @@ export class Creatives extends React.Component {
             });
             androidContent.custom = custom;
             templateData.androidContent = androidContent;
-            templateData.androidContent.type = get(inAppTemplate, 'definition.mode', '').toUpperCase();
+            templateData.androidContent.type = get(channelTemplate, 'definition.mode', '').toUpperCase();
             templateData.androidContent.deviceType = 'ANDROID';
           }
-          const iosContent = get(inAppTemplate, 'versions.base.content.IOS');
+          const iosContent = channel === constants.INAPP ? get(channelTemplate, 'versions.base.content.IOS') : get(channelTemplate, 'versions.base.IOS');
           if (!isEmpty(iosContent)) {
             if (type !== LOYALTY) {
               delete iosContent.cuid;
@@ -670,10 +627,10 @@ export class Creatives extends React.Component {
             });
             iosContent.custom = custom;
             templateData.iosContent = iosContent;
-            templateData.iosContent.type = get(inAppTemplate, 'definition.mode').toUpperCase();
+            templateData.iosContent.type = get(channelTemplate, 'definition.mode').toUpperCase();
             templateData.iosContent.deviceType = IOS.toUpperCase();
           }
-          templateData.messageSubject = inAppTemplate?.name ? inAppTemplate?.name : "messageSubject";
+          templateData.messageSubject = channelTemplate?.name ? channelTemplate?.name : "messageSubject";
         }
         break;
       case constants.WECHAT:
@@ -960,6 +917,7 @@ export class Creatives extends React.Component {
         };
         break;
       case constants.MOBILE_PUSH:
+      case constants.INAPP:
         gtmDetails = {
           ...gtmDetails,
 
@@ -967,13 +925,6 @@ export class Creatives extends React.Component {
           imageAdded: androidType === 'IMAGE' || iosType === 'IMAGE',
         };
         break;
-      case constants.INAPP:
-        gtmDetails = {
-          ...gtmDetails,
-          content: `${androidTitle} ${androidMessage} ${iosTitle} ${iosMessage}`,
-          imageAdded: androidType === IMAGE || iosType === IMAGE,
-        };
-        break;
       case constants.LINE:
         gtmDetails = Object.assign({
           ...gtmDetails,

package/v2Containers/InApp/constants.js

@@ -48,7 +48,6 @@ export const INITIAL_CTA_DATA = [
     urlType: DEEP_LINK,
     url: "",
     isSaved: false,
-    label: "",
   },
 ];
 
@@ -118,7 +117,7 @@ export const BUTTON_RADIO_OPTIONS = [
           <CapHeading type="h4">
             <FormattedMessage {...messages.btnTypeCTA} />
           </CapHeading>
-          <CapLabel><FormattedMessage {...messages.ctaDesc} /></CapLabel>
+          <CapLabel><FormattedMessage {...messages.ctaDescription} /></CapLabel>
         </div>
       </>
     ),

package/v2Containers/InApp/index.js

@@ -171,22 +171,21 @@ export const InApp = (props) => {
           : INAPP_MEDIA_TYPES.IMAGE
       );
       setInAppImageSrcAndroid(androidExpandableDetails?.image);
-      setDeepLinkValueAndroid(androidCta.actionLink);
+      setDeepLinkValueAndroid(androidCta?.actionLink);
       setAddActionLinkAndroid(!isEmpty(androidCta) && true);
       setButtonTypeAndroid(
-        androidExpandableDetails?.buttonType || INAPP_BUTTON_TYPES.NONE
+        androidExpandableDetails?.ctas?.length ? INAPP_BUTTON_TYPES.CTA : INAPP_BUTTON_TYPES.NONE
       );
-      if (androidExpandableDetails?.buttonType === INAPP_BUTTON_TYPES.CTA && androidExpandableDetails?.buttons.length > 0) {
+      if (androidExpandableDetails?.ctas?.length > 0) {
         setCtaDataAndroid(
-          androidExpandableDetails?.buttons?.map((cta) => {
-            const { index, type, text, url = "", label } = cta;
+          androidExpandableDetails?.ctas?.map((cta, index) => {
+            const { type, actionText, actionLink = "" } = cta;
             const obj = {
               index,
-              text,
-              url,
+              text: actionText,
+              url: actionLink,
               urlType: type,
               isSaved: true,
-              label,
             };
             return obj;
           })
@@ -203,20 +202,19 @@ export const InApp = (props) => {
       setTemplateMessageIos(iosMessage);
       setTemplateMediaTypeIos(iosExpandableDetails?.style === BIG_TEXT ? INAPP_MEDIA_TYPES.TEXT : INAPP_MEDIA_TYPES.IMAGE);
       setInAppImageSrcIos(iosExpandableDetails?.image);
-      setButtonTypeIos(iosExpandableDetails?.buttonType || INAPP_BUTTON_TYPES.NONE);
+      setButtonTypeIos(iosExpandableDetails?.ctas?.length ? INAPP_BUTTON_TYPES.CTA : INAPP_BUTTON_TYPES.NONE);
       setAddActionLinkIos(!isEmpty(iosCta) && true);
       setDeepLinkValueIos(iosCta?.actionLink);
-      if (iosExpandableDetails?.buttonType === INAPP_BUTTON_TYPES.CTA && iosExpandableDetails?.buttons.length > 0) {
+      if (iosExpandableDetails?.ctas?.length > 0) {
         setCtaDataIos(
-          iosExpandableDetails?.buttons?.map((cta) => {
-            const { index, type, text, url = "", label } = cta;
+          iosExpandableDetails?.ctas?.map((cta, index) => {
+            const { type, actionText, actionLink = "" } = cta;
             const obj = {
               index,
-              text,
-              url,
+              text: actionText,
+              url: actionLink,
               urlType: type,
               isSaved: true,
-              label,
             };
             return obj;
           })
@@ -543,20 +541,17 @@ export const InApp = (props) => {
 
   const getCtaPayload = (type) =>
   (type === ANDROID ? ctaDataAndroid : ctaDataIos).map((cta) => {
-    const { index, text, urlType, url, label } = cta;
+    const { text, urlType, url } = cta;
     return {
-      index,
       type: urlType,
-      text,
-      url,
-      label,
+      actionText: text,
+      actionLink: url,
     };
   });
 
   const createPayload = () => {
     let androidMediaParams = {};
     let iosMediaParams = {};
-    const buttonType = panes === ANDROID ? buttonTypeAndroid : buttonTypeIos;
     const commonDevicePayload = {
       luid: "{{luid}}",
       cuid: "{{cuid}}",
@@ -602,8 +597,7 @@ export const InApp = (props) => {
                 message: templateMessageAndroid,
                 ...androidMediaParams,
                 ...(isBtnTypeCta && {
-                  buttonType,
-                  buttons: getCtaPayload(ANDROID),
+                  ctas: getCtaPayload(ANDROID),
                 }),
               },
               custom: [],
@@ -619,8 +613,7 @@ export const InApp = (props) => {
                 message: templateMessageIos,
                 ...iosMediaParams,
                 ...(isBtnTypeCta && {
-                  buttonType,
-                  buttons: getCtaPayload(IOS),
+                  ctas: getCtaPayload(IOS),
                 }),
               },
               custom: [],

package/v2Containers/InApp/index.scss

@@ -37,7 +37,7 @@
 .inapp-footer {
   background-color: $CAP_WHITE;
   bottom: 0;
-  position: fixed;
+  // position: fixed;
   width: 100%;
   padding: $CAP_SPACE_20 0;
   z-index: 1;

package/v2Containers/InApp/messages.js

@@ -91,8 +91,8 @@ export default defineMessages({
     id: `${prefix}.btnTypeCTA`,
     defaultMessage: "Call to action",
   },
-  ctaDesc: {
-    id: `${prefix}.ctaDesc`,
+  ctaDescription: {
+    id: `${prefix}.ctaDescription`,
     defaultMessage:
       "Create a button that lets customers take an action",
   },