Show clipboard toast before redirecting to store from Web-to-App Bann…

…er (#46) * show toast before redirecting to store * use translate3d in other animations * update version and dist * fix vulnerabilities * build dist files
Kumulos · Nov 26, 2021 · b9a458c · b9a458c
1 parent fa52327
commit b9a458c
Show file tree

Hide file tree

Showing 10 changed files with 4,836 additions and 14,689 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.11.0",
+    "version": "1.11.1",
     "description": "Official SDK for integrating Kumulos services with your web projects",
     "main": "dist/index.js",
     "types": "types/src/index.d.ts",
@@ -24,16 +24,16 @@
     "author": "Kumulos Ltd. <support@kumulos.com>",
     "license": "MIT",
     "devDependencies": {
-        "@types/jest": "^26.0.14",
+        "@types/jest": "^27.0.3",
         "css-loader": "^6.2.0",
-        "jest": "^26.4.2",
-        "node-sass": "^6.0.1",
+        "jest": "^27.3.1",
         "prettier": "^1.19.1",
-        "sass-loader": "^12.1.0",
+        "sass": "^1.43.5",
+        "sass-loader": "^12.3.0",
         "style-loader": "^3.2.1",
         "terser": "^5.7.2",
         "terser-webpack-plugin": "^5.1.4",
-        "ts-jest": "^26.4.0",
+        "ts-jest": "^27.0.7",
         "ts-loader": "^9.2.5",
         "typescript": "^4.4.2",
         "webpack": "^5.51.1",

diff --git a/src/core/index.ts b/src/core/index.ts
@@ -1,8 +1,9 @@
 import { authedFetch, cyrb53, uuidv4 } from './utils';
 import { del, get, set } from './storage';
+
 import { Channel } from './channels';
 
-const SDK_VERSION = '1.11.0';
+const SDK_VERSION = '1.11.1';
 const SDK_TYPE = 10;
 const EVENTS_BASE_URL = 'https://events.kumulos.com';
 export const PUSH_BASE_URL = 'https://push.kumulos.com';

diff --git a/src/prompts/ddl/ddl-banner.tsx b/src/prompts/ddl/ddl-banner.tsx
@@ -1,7 +1,12 @@
-import { Component, h, createRef, RefObject } from 'preact';
-import { DdlBannerPromptConfig, PromptPosition } from '../../core';
-import DeeplinkButton from './deeplink-button';
+import { Component, RefObject, createRef, h } from 'preact';
+import {
+    DdlBannerPromptConfig,
+    PromptPosition,
+    UiActionType
+} from '../../core';
+
 import { AppRating } from '../../components/app-rating';
+import DeeplinkButton from './deeplink-button';
 
 const styles = {
     bannerIconStyle: {
@@ -23,20 +28,28 @@ const CLASSES = [
     'kumulos-safe-area-inset-pad-right'
 ];
 
+const SHOW_COPY_TOAST_DELAY = 1000;
+
 export interface DdlBannerProps {
     config: DdlBannerPromptConfig;
     onConfirm: (config: DdlBannerPromptConfig) => void;
     onCancel: (config: DdlBannerPromptConfig) => void;
     dimensions: (width: number, height: number) => void;
 }
 
-export class DdlBanner extends Component<DdlBannerProps, never> {
+export class DdlBanner extends Component<
+    DdlBannerProps,
+    {
+        showCopyToast: boolean;
+    }
+> {
     private containerRef: RefObject<HTMLDivElement>;
 
     constructor(props: DdlBannerProps) {
         super(props);
 
         this.containerRef = createRef<HTMLDivElement>();
+        this.state = { showCopyToast: false };
     }
 
     componentDidMount() {
@@ -49,18 +62,38 @@ export class DdlBanner extends Component<DdlBannerProps, never> {
         this.props.dimensions(clientWidth, clientHeight);
     }
 
-    private onConfirm = () => {
-        this.props.onConfirm(this.props.config);
+    private onConfirm = (actionType: UiActionType) => {
+        if (this.state.showCopyToast === true) {
+            return;
+        }
+
+        if (actionType === UiActionType.DDL_OPEN_DEEPLINK) {
+            this.props.onConfirm(this.props.config);
+            return;
+        }
+
+        if (actionType === UiActionType.DDL_OPEN_STORE) {
+            this.setState({ showCopyToast: true });
+            setTimeout(() => {
+                this.setState({ showCopyToast: false });
+                this.props.onConfirm(this.props.config);
+            }, SHOW_COPY_TOAST_DELAY);
+        }
     };
 
     private onCancel = () => {
         this.props.onCancel(this.props.config);
     };
 
     private getCssClasses(promptPosition: PromptPosition) {
-        const classes = [...CLASSES, `kumulos-prompt-position-${promptPosition}`];
-
-        if ([PromptPosition.TOP, PromptPosition.BOTTOM].includes(promptPosition)) {
+        const classes = [
+            ...CLASSES,
+            `kumulos-prompt-position-${promptPosition}`
+        ];
+
+        if (
+            [PromptPosition.TOP, PromptPosition.BOTTOM].includes(promptPosition)
+        ) {
             classes.push(`kumulos-safe-area-inset-pad-${promptPosition}`);
         }
 
@@ -70,13 +103,7 @@ export class DdlBanner extends Component<DdlBannerProps, never> {
     render() {
         const { config } = this.props;
 
-        const {
-            position,
-            labels,
-            colors,
-            imageUrl,
-            appRating
-        } = config;
+        const { position, labels, colors, imageUrl, appRating } = config;
         const { heading, body, acceptAction } = labels;
         const {
             bg,
@@ -144,6 +171,10 @@ export class DdlBanner extends Component<DdlBannerProps, never> {
                         onAction={this.onConfirm}
                     />
                 </div>
+
+                {this.state.showCopyToast && (
+                    <div class="kumulos-toast">Link Copied</div>
+                )}
             </div>
         );
     }

diff --git a/src/prompts/ddl/deeplink-button.tsx b/src/prompts/ddl/deeplink-button.tsx
@@ -1,13 +1,14 @@
 import { Component, h } from 'preact';
-import copy from 'clipboard-copy';
 import { DdlUiActions, UiActionType } from '../../core';
 
+import copy from 'clipboard-copy';
+
 interface DeeplinkButtonProps {
     style: h.JSX.CSSProperties;
     class: string;
     text: string;
     promptActions: DdlUiActions;
-    onAction: () => void;
+    onAction: (actionType: UiActionType) => void;
 }
 
 export default class DeeplinkButton extends Component<
@@ -22,7 +23,9 @@ export default class DeeplinkButton extends Component<
         switch (accept.type) {
             case UiActionType.DDL_OPEN_STORE:
                 copy(accept.deepLinkUrl)
-                    .then(this.props.onAction)
+                    .then(() =>
+                        this.props.onAction(UiActionType.DDL_OPEN_STORE)
+                    )
                     .catch(e => {
                         console.error(
                             'Unable to capture deeplink url for deferred app pickup',
@@ -31,7 +34,7 @@ export default class DeeplinkButton extends Component<
                     });
                 break;
             case UiActionType.DDL_OPEN_DEEPLINK:
-                this.props.onAction();
+                this.props.onAction(UiActionType.DDL_OPEN_STORE);
                 break;
             default:
                 return console.error(

diff --git a/src/prompts/styles/_anims.scss b/src/prompts/styles/_anims.scss
@@ -64,7 +64,7 @@
 
     100% {
         opacity: 1;
-        transform: translateY(-50%, 0, 0);
+        transform: translate3d(-50%, 0, 0);
     }
 }
 
@@ -74,7 +74,7 @@
     }
 
     100% {
-        transform: translateY(0, 0, 0);
+        transform: translate3d(0, 0, 0);
     }
 }
 
@@ -84,6 +84,6 @@
     }
 
     100% {
-        transform: translateY(0, 0, 0);
+        transform: translate3d(0, 0, 0);
     }
 }
diff --git a/types/src/prompts/ddl/ddl-banner.d.ts b/types/src/prompts/ddl/ddl-banner.d.ts
@@ -6,7 +6,9 @@ export interface DdlBannerProps {
     onCancel: (config: DdlBannerPromptConfig) => void;
     dimensions: (width: number, height: number) => void;
 }
-export declare class DdlBanner extends Component<DdlBannerProps, never> {
+export declare class DdlBanner extends Component<DdlBannerProps, {
+    showCopyToast: boolean;
+}> {
     private containerRef;
     constructor(props: DdlBannerProps);
     componentDidMount(): void;

diff --git a/types/src/prompts/ddl/deeplink-button.d.ts b/types/src/prompts/ddl/deeplink-button.d.ts
@@ -1,11 +1,11 @@
 import { Component, h } from 'preact';
-import { DdlUiActions } from '../../core';
+import { DdlUiActions, UiActionType } from '../../core';
 interface DeeplinkButtonProps {
     style: h.JSX.CSSProperties;
     class: string;
     text: string;
     promptActions: DdlUiActions;
-    onAction: () => void;
+    onAction: (actionType: UiActionType) => void;
 }
 export default class DeeplinkButton extends Component<DeeplinkButtonProps, never> {
     private handleAction;