banner view implemented (Iterable#213)

* banner view implemented

* code changes as per recent review

* usage of banner view

* Banner View Webpack config changed

* .babelrc config changed

* [MOB-7175]: add new filter method that leaves in JSON only messages (Iterable#238)

* add new filter method that leaves in JSON only messages

* Mentioning filterOnlyReadAndNeverTriggerMessages

---------

Co-authored-by: mitch prewitt <[email protected]>
Co-authored-by: Brad Umbaugh <[email protected]>

* ver bump (Iterable#240)

Co-authored-by: mitch prewitt <[email protected]>

---------

Co-authored-by: Vishal Joshi <[email protected]>
Co-authored-by: devcsomnicg <[email protected]>
Co-authored-by: Mitch Prewitt <[email protected]>
Co-authored-by: mitch prewitt <[email protected]>
Co-authored-by: Brad Umbaugh <[email protected]>
Co-authored-by: Hani <[email protected]>

Author: 6 people

README.md

@@ -204,7 +204,7 @@ request()
 
 :rotating_light: *_PLEASE NOTE_*: If you choose the `deferred` option, the SDK will _not_ do any filtering or sorting on the messages internally. You will get the messages exactly as they come down from the API, untouched. This means you may (for example) show in-app messages marked `read` or show the messages in the wrong order based on `priority`.
 
-If you want to keep the default sorting and filtering, please take advantage of the `sortInAppMessages` and `filterHiddenInAppMessages` methods the SDK provides.
+If you want to keep the default sorting and filtering, please take advantage of the `sortInAppMessages` and `filterHiddenInAppMessages` methods the SDK provides. Also see `filterOnlyReadAndNeverTriggerMessages`, which is similar to `filterHiddenInAppMessages` but does not filter out JSON-only messages.
 
 ## initialize
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@iterable/web-sdk",
   "description": "Iterable SDK for JavaScript and Node.",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "homepage": "https://iterable.com/",
   "repository": {
     "type": "git",

react-example/src/views/Banner.tsx

@@ -0,0 +1,14 @@
+import { Banner } from '@iterable/web-sdk';
+
+export const BannerView = () => {
+  return (
+    <Banner
+      body="Hello World!"
+      buttonText="OK"
+      heading="A banner view interface"
+      logo="https://www.google.com/images/branding/googlelogo/1x/googlelogo_dark_color_272x92dp.png"
+    />
+  );
+};
+
+export default BannerView;

src/components/banner/index.tsx

@@ -0,0 +1,90 @@
+import React, { CSSProperties } from 'react';
+import '../style.css';
+
+interface IBannerProps {
+  heading: string;
+  body: string;
+  buttonText: string;
+  logo: string;
+  buttonStyles?: CSSProperties;
+  bannerStyles?: CSSProperties;
+  logoStyles?: CSSProperties;
+  headingStyles?: CSSProperties;
+  bodyStyles?: CSSProperties;
+  buttonClickHandler?: (e: any) => void;
+}
+
+export const Banner = (props: IBannerProps) => {
+  const {
+    heading,
+    body,
+    buttonText,
+    logo,
+    bannerStyles,
+    buttonStyles,
+    logoStyles,
+    headingStyles,
+    bodyStyles,
+    buttonClickHandler
+  } = props;
+
+  const defaultBannerStyles = {
+    display: 'flex',
+    alignItems: 'center',
+    backgroundColor: '#ffffff',
+    padding: '20px',
+    margin: '20px',
+    borderRadius: '8px',
+    boxShadow: '0 2px 6px rgba(0, 0, 0, 0.3)'
+  };
+  const defaultHeadingStyles = {
+    fontSize: '25px',
+    marginBottom: '20px',
+    marginRight: '20px'
+  };
+  const defaultBodyStyles = {
+    fontSize: '16px',
+    marginBottom: '20px',
+    marginRight: '20px'
+  };
+  const defaultButtonStyles = {
+    backgroundColor: '#6c016cf5',
+    color: '#fff',
+    padding: '10px 20px',
+    border: 'none',
+    borderRadius: '40px',
+    cursor: 'pointer',
+    marginBottom: '20px'
+  };
+  const defaultLogoStyles = {
+    width: '100%',
+    height: 'auto'
+  };
+
+  return (
+    <div
+      className="banner-container"
+      style={{ ...defaultBannerStyles, ...bannerStyles }}
+    >
+      <div className="content-container ">
+        <h2 style={{ ...defaultHeadingStyles, ...headingStyles }}>{heading}</h2>
+        <p style={{ ...defaultBodyStyles, ...bodyStyles }}>{body}</p>
+        <button
+          style={{ ...defaultButtonStyles, ...buttonStyles }}
+          onClick={
+            buttonClickHandler as React.MouseEventHandler<HTMLButtonElement>
+          }
+        >
+          {buttonText}
+        </button>
+      </div>
+      <div style={{ marginRight: '20px' }}>
+        <img
+          src={logo}
+          alt="Logo"
+          style={{ ...defaultLogoStyles, ...logoStyles }}
+        />
+      </div>
+    </div>
+  );
+};

src/components/style.css

@@ -1,3 +1,22 @@
+@media (max-width: 600px) {
+  .banner-container {
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .banner-container>.content-container {
+    margin-bottom: 20px;
+    order: 2;
+    max-width: 75%;
+  }
+
+  .banner-container>div:last-child {
+    order: 1;
+    margin-bottom: 0;
+  }
+}
+
 @media (max-width: 768px) {
   .card {
     max-width: 90%;

src/inapp/tests/utils.test.ts

@@ -9,6 +9,7 @@ import { CLOSE_BUTTON_POSITION, CachedMessage, InAppMessage } from '../types';
 import {
   addButtonAttrsToAnchorTag,
   filterHiddenInAppMessages,
+  filterOnlyReadAndNeverTriggerMessages,
   generateCloseButton,
   generateWidth,
   getCachedMessagesToDelete,
@@ -33,7 +34,7 @@ const mockMarkup = `
 `;
 
 describe('Utils', () => {
-  describe('Filtering', () => {
+  describe('filterHiddenInAppMessages', () => {
     it('should filter out read messages', () => {
       expect(filterHiddenInAppMessages()).toEqual([]);
       expect(filterHiddenInAppMessages(messages).every((e) => !e?.read)).toBe(
@@ -128,6 +129,100 @@ describe('Utils', () => {
     });
   });
 
+  describe('filterOnlyReadAndNeverTriggerMessages', () => {
+    it('should filter out read messages', () => {
+      expect(filterOnlyReadAndNeverTriggerMessages()).toEqual([]);
+      expect(
+        filterOnlyReadAndNeverTriggerMessages(messages).every((e) => !e?.read)
+      ).toBe(true);
+      expect(
+        filterOnlyReadAndNeverTriggerMessages([
+          {
+            ...messages[0],
+            read: true
+          },
+          {
+            ...messages[1],
+            read: true
+          }
+        ]).length
+      ).toBe(0);
+      expect(
+        filterOnlyReadAndNeverTriggerMessages([
+          {
+            ...messages[0],
+            trigger: { type: 'good' },
+            read: undefined
+          },
+          {
+            ...messages[1],
+            trigger: { type: 'good' },
+            read: undefined
+          }
+        ]).length
+      ).toBe(2);
+    });
+
+    it('should filter out trigger type "never" messages', () => {
+      expect(
+        filterOnlyReadAndNeverTriggerMessages(messages).every(
+          (e) => !e?.trigger?.type
+        )
+      ).not.toBe('never');
+      expect(
+        filterOnlyReadAndNeverTriggerMessages([
+          {
+            ...messages[0],
+            trigger: { type: 'never' }
+          },
+          {
+            ...messages[1],
+            trigger: { type: 'never' }
+          }
+        ]).length
+      ).toBe(0);
+      expect(
+        filterOnlyReadAndNeverTriggerMessages([
+          {
+            ...messages[0],
+            trigger: undefined
+          },
+          {
+            ...messages[1],
+            trigger: undefined
+          }
+        ]).length
+      ).toBe(2);
+    });
+
+    it('should not filter out messages with no HTML body', () => {
+      expect(
+        filterOnlyReadAndNeverTriggerMessages([
+          {
+            ...messages[0],
+            content: { ...messages[0].content, html: '' }
+          },
+          {
+            ...messages[1],
+            content: { ...messages[0].content, html: '<p>' }
+          }
+        ]).length
+      ).toBe(2);
+      expect(
+        filterOnlyReadAndNeverTriggerMessages([
+          {
+            ...messages[0],
+            content: undefined
+          },
+          {
+            ...messages[1],
+            content: undefined
+          }
+        ]).length
+      ).toBe(2);
+    });
+  });
+
   describe('Sorting', () => {
     it('should sort messages by priority level, lesser ones first', () => {
       expect(sortInAppMessages()).toEqual([]);

src/inapp/utils.ts

@@ -120,6 +120,14 @@ export const filterHiddenInAppMessages = (
   });
 };
 
+export const filterOnlyReadAndNeverTriggerMessages = (
+  messages: Partial<InAppMessage>[] = []
+) => {
+  return messages.filter(
+    (eachMessage) => !eachMessage.read && eachMessage.trigger?.type !== 'never'
+  );
+};
+
 export const sortInAppMessages = (messages: Partial<InAppMessage>[] = []) => {
   return messages.sort(by(['priorityLevel', 'asc'], ['createdAt', 'asc']));
 };

src/index.ts

@@ -7,5 +7,6 @@ export * from './types';
 export * from './components/card';
 export * from './embedded';
 export * from './embedded';
+export * from './components/banner';
 export * from './components/notification';
 export { config } from './utils/config';