Support Alert and Banner image in prompt configuration (#41)

* Prevent banner and alert from rendering img if none exists in config * Update bundles Co-authored-by: Rob Dick <r.dick@kumulos.com>
Kumulos · Aug 13, 2021 · f3c3a4e · f3c3a4e
1 parent 5ea6ef3
commit f3c3a4e
Show file tree

Hide file tree

Showing 7 changed files with 59 additions and 44 deletions.
diff --git a/dist/index.js b/dist/index.js
diff --git a/dist/worker.js b/dist/worker.js
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@kumulos/web",
-    "version": "1.8.1",
+    "version": "1.9.0",
     "description": "Official SDK for integrating Kumulos services with your web projects",
     "main": "dist/index.js",
     "types": "types/src/index.d.ts",

diff --git a/src/core/index.ts b/src/core/index.ts
@@ -2,7 +2,7 @@ import { authedFetch, cyrb53, uuidv4 } from './utils';
 import { del, get, set } from './storage';
 import { Channel } from './channels';
 
-const SDK_VERSION = '1.8.1';
+const SDK_VERSION = '1.9.0';
 const SDK_TYPE = 10;
 const EVENTS_BASE_URL = 'https://events.kumulos.com';
 export const PUSH_BASE_URL = 'https://push.kumulos.com';
@@ -170,6 +170,10 @@ interface BasePromptConfig {
     actions?: PromptAction[];
 }
 
+interface WithImageUrl {
+    imageUrl?: string;
+}
+
 interface TooltipConfig {
     tooltip: {
         subscribe: string;
@@ -230,7 +234,10 @@ type AlertLabelConfig = NamedDialogLabelConfig<PromptTypeName.ALERT> &
     ToastMessage;
 type AlertColorConfig = NamedDialogColorConfig<PromptTypeName.ALERT>;
 
-export interface AlertPromptConfig extends BasePromptConfig, PromptUiActions {
+export interface AlertPromptConfig
+    extends BasePromptConfig,
+        WithImageUrl,
+        PromptUiActions {
     type: PromptTypeName.ALERT;
     labels: AlertLabelConfig;
     colors: AlertColorConfig;
@@ -244,7 +251,10 @@ type BannerLabelConfig = NamedDialogLabelConfig<PromptTypeName.BANNER> &
     ToastMessage;
 type BannerColorConfig = NamedDialogColorConfig<PromptTypeName.BANNER>;
 
-export interface BannerPromptConfig extends BasePromptConfig, PromptUiActions {
+export interface BannerPromptConfig
+    extends BasePromptConfig,
+        WithImageUrl,
+        PromptUiActions {
     type: PromptTypeName.BANNER;
     labels: BannerLabelConfig;
     colors: BannerColorConfig;
@@ -259,31 +269,31 @@ export interface AppRating {
     ratingCount: number;
 }
 
-type DdlDialogColorConfig = DialogColorConfig & {ratingFg: string};
+type DdlDialogColorConfig = DialogColorConfig & { ratingFg: string };
 
 type OpenStoreUiAction = {
-    type: UiActionType.DDL_OPEN_STORE,
-    url: string,
-    deepLinkUrl: string
+    type: UiActionType.DDL_OPEN_STORE;
+    url: string;
+    deepLinkUrl: string;
 };
 type OpenDeepLinkUiAction = {
-    type: UiActionType.DDL_OPEN_DEEPLINK,
-    deepLinkUrl: string
+    type: UiActionType.DDL_OPEN_DEEPLINK;
+    deepLinkUrl: string;
 };
 
 export type DdlUiActions = PromptUiActions & {
     uiActions: {
-        accept: OpenStoreUiAction | OpenDeepLinkUiAction
-    }
-}
+        accept: OpenStoreUiAction | OpenDeepLinkUiAction;
+    };
+};
 
 export interface DdlBannerPromptConfig
     extends BasePromptConfig,
+        WithImageUrl,
         DdlUiActions {
     type: PromptTypeName.DDL_BANNER;
     labels: DialogLabelConfig;
     colors: DdlDialogColorConfig;
-    imageUrl: string;
     appRating?: AppRating;
 }
 

diff --git a/src/prompts/dialog/index.tsx b/src/prompts/dialog/index.tsx
@@ -93,15 +93,17 @@ export class Dialog extends Component<
 
         const iconStyle = {
             ...styles.iconStyle,
-            backgroundImage: `url(${uiContext.platformConfig.iconUrl})`
+            backgroundImage: `url(${config.imageUrl})`
         };
 
         return (
             <div style={containerStyle} className={classes}>
-                <div
-                    style={iconStyle}
-                    className={`kumulos-${config.type}-icon`}
-                ></div>
+                {config.imageUrl && (
+                    <div
+                        style={iconStyle}
+                        className={`kumulos-${config.type}-icon`}
+                    ></div>
+                )}
 
                 <div className={`kumulos-${config.type}-content`}>
                     <div className={`kumulos-${config.type}-header`}>

diff --git a/types/src/core/index.d.ts b/types/src/core/index.d.ts
@@ -135,6 +135,9 @@ interface BasePromptConfig {
     overlay?: PromptOverlayConfig;
     actions?: PromptAction[];
 }
+interface WithImageUrl {
+    imageUrl?: string;
+}
 interface TooltipConfig {
     tooltip: {
         subscribe: string;
@@ -174,7 +177,7 @@ export interface BellPromptConfig extends BasePromptConfig {
 }
 declare type AlertLabelConfig = NamedDialogLabelConfig<PromptTypeName.ALERT> & ToastMessage;
 declare type AlertColorConfig = NamedDialogColorConfig<PromptTypeName.ALERT>;
-export interface AlertPromptConfig extends BasePromptConfig, PromptUiActions {
+export interface AlertPromptConfig extends BasePromptConfig, WithImageUrl, PromptUiActions {
     type: PromptTypeName.ALERT;
     labels: AlertLabelConfig;
     colors: AlertColorConfig;
@@ -183,7 +186,7 @@ export interface AlertPromptConfig extends BasePromptConfig, PromptUiActions {
 }
 declare type BannerLabelConfig = NamedDialogLabelConfig<PromptTypeName.BANNER> & ToastMessage;
 declare type BannerColorConfig = NamedDialogColorConfig<PromptTypeName.BANNER>;
-export interface BannerPromptConfig extends BasePromptConfig, PromptUiActions {
+export interface BannerPromptConfig extends BasePromptConfig, WithImageUrl, PromptUiActions {
     type: PromptTypeName.BANNER;
     labels: BannerLabelConfig;
     colors: BannerColorConfig;
@@ -211,11 +214,10 @@ export declare type DdlUiActions = PromptUiActions & {
         accept: OpenStoreUiAction | OpenDeepLinkUiAction;
     };
 };
-export interface DdlBannerPromptConfig extends BasePromptConfig, DdlUiActions {
+export interface DdlBannerPromptConfig extends BasePromptConfig, WithImageUrl, DdlUiActions {
     type: PromptTypeName.DDL_BANNER;
     labels: DialogLabelConfig;
     colors: DdlDialogColorConfig;
-    imageUrl: string;
     appRating?: AppRating;
 }
 export declare type PushPromptConfig = BellPromptConfig | AlertPromptConfig | BannerPromptConfig;