Add Deferred Deep Linking Web-to-App Banner (#33)

* add config definition for ddl banner * tmp split out ddl banner component * Ensure config validation accounts for feature driven initialisation * Start segrating feature paths * Create root frame to enable push/ddl manager split * Independently initialise features * Relocate ddl impl * Relocate styles outside prompts realm * Capture link in clipboard * Split k root into sub containers for push / ddl * Repeat use of platform config and context for icon url * Move config into core and clear deck for unifying via single prompt manager * Remove type * Wrap DOM ready listenter around SDK main init * Remove, dont need * Relocate banner styles * Uprev to 1.8.0 * Refactor / dry up prompt config * Renaming * Clean up ddl manager and config * npm audit fix * Remove unused, update type def * Move ddl under prompts * Split out prompt reminder impl * cleanup * Tidy up / remove dead code * Split out event handling and prompt filtering * Remove api payload mapping * Update type name casing * Move ddl feature check into browser compat check * Relocate deferred prompt to prompt utils * make Push feature default when no features specified * Ensure features cant be [] Further enhacement chat in flight around supporting no features at all, e.g. to support sdk consumer A/B testing etc * Adjust ddl config to remove nested named labels & colors * Make public key non-nullable * Swap out clipboard dep for smaller library * Perform check for public key and throw if not present as this would seem a critial error in this context * Reject promise if no public key is present * Revert to making vapidPublicKey required * Remove test/dev config * Use glyph for close icon * Move dom load handler * Update bundles * Remove debug logging * Update bundles * Update bundle * Remove display of rating stars * Update bundles * Wire up color config to decline UI action * Update bundles * Rename ddl banner type name * Add app star rating and rating count to Deferred DeepLink Banner (#35) * Add app rating component * Add app rating to ddl banner * Remove dev/debug body padding * Relocate rating comp styles * Split out rating comp to shared components area * Update bundle * Rename prop * Throw when an auth fetch fails * Use authedFetch directly when pulling ddl config * Rename ddl store url config prop name Co-authored-by: Rob Dick <r.dick@kumulos.com> * Fix check for browser support when ddl feature is specified * Add config driven color to rating stars component * Post npm audit fix updates * Add confirm uiActions for dl banner action for store redirection * Revert links dev url and build dist bundles * Handle clipboard copy operation promise * Hide prompt only after succesful deeplink clipboard capture * Remove unused imports * Move deeplink handling back under DeeplinkButton comp * Remove unused import * Remove redundant source file * Fix browser suport check Co-authored-by: Rob Dick <r.dick@kumulos.com> Co-authored-by: robdick <robdick101@gmail.com>
Kumulos · Jun 25, 2021 · abd64f7 · abd64f7
1 parent 03b3d0c
commit abd64f7
Show file tree

Hide file tree

Showing 62 changed files with 1,392 additions and 397 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.7.2",
+    "version": "1.8.0",
     "description": "Official SDK for integrating Kumulos services with your web projects",
     "main": "dist/index.js",
     "types": "types/src/index.d.ts",
@@ -40,6 +40,7 @@
         "webpack-cli": "^3.3.9"
     },
     "dependencies": {
+        "clipboard-copy": "^4.0.1",
         "preact": "^10.5.13"
     }
-}
+}
diff --git a/src/components/app-rating/app-rating.scss b/src/components/app-rating/app-rating.scss
@@ -0,0 +1,24 @@
+.kumulos-rating {
+    display: flex;
+    height: 20px;
+    font-size: 16px;
+    align-items: center;
+    margin-top: 3px;
+
+    .kumulos-rating-star {
+        position: relative;
+
+        .kumulos-rating-halfstar {
+            position: absolute;
+            left: 0;
+            top: 0;
+            width: 50%;
+            overflow: hidden;
+        }
+    }
+
+    .kumulos-rating-count {
+        font-size: 12px;
+        margin-left: 3px;
+    }
+}
diff --git a/src/components/app-rating/index.tsx b/src/components/app-rating/index.tsx
@@ -0,0 +1,66 @@
+import { h } from 'preact';
+
+import './app-rating.scss';
+
+export interface AppRatingProps {
+    stars: number;
+    ratingCount: number;
+    color: string;
+}
+
+export function AppRating(props: AppRatingProps) {
+    const { stars, ratingCount } = props;
+
+    function createStars() {
+        const starEls = [];
+        for (let i = 1; i <= 5; i++) {
+            starEls.push(
+                <AppRatingStar
+                    state={
+                        stars >= i
+                            ? 'on'
+                            : stars < i && stars > i - 1
+                            ? 'half'
+                            : 'off'
+                    }
+                />
+            );
+        }
+
+        return starEls;
+    }
+
+    const ratingStyle = {
+        color: props.color
+    };
+
+    return (
+        <div class="kumulos-rating" style={ratingStyle}>
+            {createStars()}
+            <span class="kumulos-rating-count">({props.ratingCount})</span>
+        </div>
+    );
+}
+
+interface AppRatingStarProps {
+    state: 'on' | 'half' | 'off';
+}
+
+function AppRatingStar(props: AppRatingStarProps) {
+    let starEl;
+
+    if (props.state === 'on') {
+        starEl = <span>&#9733;</span>;
+    } else if (props.state === 'half') {
+        starEl = (
+            <div>
+                <span>&#9734;</span>
+                <span class="kumulos-rating-halfstar">&#9733;</span>
+            </div>
+        );
+    } else {
+        starEl = <span>&#9734;</span>;
+    }
+
+    return <div class="kumulos-rating-star">{starEl}</div>;
+}
diff --git a/src/core/config.ts b/src/core/config.ts
@@ -1,21 +1,34 @@
-import { Context, PUSH_BASE_URL, PlatformConfig } from '.';
+import {
+    Context,
+    PUSH_BASE_URL,
+    PlatformConfig,
+    DdlPromptConfig,
+    DDL_BASE_URL,
+    getInstallId
+} from '.';
 import { get, set } from './storage';
 
 import { authedFetchJson } from './utils';
 
-export async function loadConfig(ctx: Context): Promise<PlatformConfig> {
-    let config = (await get<PlatformConfig>('platformConfig')) ?? {};
+async function loadConfig<TConfigType>(
+    url: string,
+    cacheKey: string,
+    ctx: Context
+): Promise<TConfigType> {
+    const CONFIG_CACHE_KEY = `${cacheKey}Config`;
+    const CONFIG_CACHE_KEY_UPDATED = `${cacheKey}ConfigUpdated`;
     const MAX_AGE_MS = 1 * 60 * 60 * 1000;
 
-    const lastLoadTime = (await get<number>('platformConfigUpdated')) ?? 0;
+    let config = await get<TConfigType>(CONFIG_CACHE_KEY);
+
+    const lastLoadTime = (await get<number>(CONFIG_CACHE_KEY_UPDATED)) ?? 0;
     let updatedRemoteConfig = false;
 
     if (Date.now() - lastLoadTime > MAX_AGE_MS) {
         console.info('Config never synced/stale, syncing now...');
 
         try {
-            const url = `${PUSH_BASE_URL}/v1/web/config`;
-            config = await authedFetchJson<PlatformConfig>(ctx, url);
+            config = await authedFetchJson<TConfigType>(ctx, url);
             updatedRemoteConfig = true;
         } catch (e) {
             console.warn(e);
@@ -24,9 +37,40 @@ export async function loadConfig(ctx: Context): Promise<PlatformConfig> {
     }
 
     if (updatedRemoteConfig) {
-        await set('platformConfig', config);
-        await set('platformConfigUpdated', Date.now());
+        await set(CONFIG_CACHE_KEY, config);
+        await set(CONFIG_CACHE_KEY_UPDATED, Date.now());
     }
 
     return config;
 }
+
+export async function loadPlatformConfig(
+    ctx: Context
+): Promise<PlatformConfig> {
+    return (
+        (await loadConfig<PlatformConfig>(
+            `${PUSH_BASE_URL}/v1/web/config`,
+            'platform',
+            ctx
+        )) ?? {}
+    );
+}
+
+export async function loadDdlConfig(
+    ctx: Context
+): Promise<DdlPromptConfig[] | undefined> {
+    const webInstallId = await getInstallId();
+
+    try {
+        return await authedFetchJson<DdlPromptConfig[]>(
+            ctx,
+            `${DDL_BASE_URL}/v1/banners?webInstallId=${webInstallId}`
+        );
+    } catch (err) {
+        console.warn(
+            `loadDdlConfig: failed to load Deferred DeepLink configuration`,
+            err.message
+        );
+        // undefined return / no config
+    }
+}