flowboard-react 0.2.0 → 0.4.0

package/src/core/assetPreloader.ts

@@ -1,14 +1,18 @@
 import { Image } from 'react-native';
 
+function isNetworkLikeUri(value: unknown): value is string {
+  if (typeof value !== 'string') return false;
+  const normalized = value.trim();
+  if (!normalized) return false;
+  return /^(https?:|file:|content:|data:)/i.test(normalized);
+}
+
 export class AssetPreloader {
   private preloadedUrls = new Set<string>();
 
   async preloadScreenAssets(screenData: Record<string, any>): Promise<void> {
     const assets = this.extractAssets(screenData);
-    if (
-      assets.networkImages.length === 0 &&
-      assets.networkLotties.length === 0
-    ) {
+    if (assets.networkImages.length === 0) {
       return;
     }
 
@@ -20,16 +24,6 @@ export class AssetPreloader {
       tasks.push(Image.prefetch(url).catch(() => null));
     }
 
-    for (const url of assets.networkLotties) {
-      if (this.preloadedUrls.has(url)) continue;
-      this.preloadedUrls.add(url);
-      tasks.push(
-        fetch(url)
-          .then(() => null)
-          .catch(() => null)
-      );
-    }
-
     if (tasks.length > 0) {
       await Promise.all(tasks);
     }
@@ -41,11 +35,9 @@ export class AssetPreloader {
 
   private extractAssets(data: Record<string, any>): {
     networkImages: string[];
-    networkLotties: string[];
   } {
     const assets = {
       networkImages: [] as string[],
-      networkLotties: [] as string[],
     };
     this.scanWidget(data, assets, 0);
     return assets;
@@ -53,7 +45,7 @@ export class AssetPreloader {
 
   private scanWidget(
     widget: any,
-    assets: { networkImages: string[]; networkLotties: string[] },
+    assets: { networkImages: string[] },
     depth: number
   ): void {
     if (!widget || depth > 50) return;
@@ -72,26 +64,23 @@ export class AssetPreloader {
       const source = props.source;
       const url = props.url;
       if (source === 'network' && url) {
-        assets.networkImages.push(url);
+        if (isNetworkLikeUri(url)) assets.networkImages.push(url);
       }
-    }
-
-    if (type === 'lottie') {
-      const source = props.source;
-      const url = props.url;
-      if (source === 'network' && url) {
-        assets.networkLotties.push(url);
+      if (source === 'asset' && props.path) {
+        if (isNetworkLikeUri(props.path)) assets.networkImages.push(props.path);
       }
     }
 
     const background = widget.background ?? props.background;
-    if (
-      background &&
-      typeof background === 'object' &&
-      background.type === 'image'
-    ) {
-      const url = background.url;
-      if (url) assets.networkImages.push(url);
+    if (background && typeof background === 'object') {
+      if (background.type === 'image') {
+        const url = background.url;
+        if (isNetworkLikeUri(url)) assets.networkImages.push(url);
+      }
+      if (background.type === 'asset') {
+        const path = background.path;
+        if (isNetworkLikeUri(path)) assets.networkImages.push(path);
+      }
     }
 
     Object.values(widget).forEach((value) => {

package/src/core/resolverService.ts

@@ -2,12 +2,16 @@ import type { ClientContext } from './clientContext';
 import type { FlowboardData } from '../types/flowboard';
 
 const DEFAULT_ENDPOINT = 'https://test-638704832888.europe-west1.run.app';
+const SPECIFIC_ONBOARDING_ENDPOINT =
+  'https://onboardsolo-638704832888.europe-west1.run.app';
 
 export class ResolverService {
   private endpoint: string;
+  private specificOnboardingEndpoint: string;
 
   constructor(endpoint?: string) {
     this.endpoint = endpoint ?? DEFAULT_ENDPOINT;
+    this.specificOnboardingEndpoint = SPECIFIC_ONBOARDING_ENDPOINT;
   }
 
   async fetchOnboardingJson(params: {
@@ -52,7 +56,45 @@ export class ResolverService {
     }
 
     const body = (await response.json()) as FlowboardData;
+    this.applyHeaderMetadata(response, body);
 
+    return body;
+  }
+
+  async fetchOnboardingById(params: {
+    onboardingId: string;
+    locale: string;
+  }): Promise<FlowboardData> {
+    const payload = {
+      onboardingId: params.onboardingId,
+      locale: params.locale,
+    };
+
+    let response: Response;
+    try {
+      response = await fetch(this.specificOnboardingEndpoint, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(payload),
+      });
+    } catch (error) {
+      throw new Error(`Failed to connect to resolver: ${String(error)}`);
+    }
+
+    if (!response.ok) {
+      const body = await response.text();
+      throw new Error(
+        `Failed to load onboarding config: ${response.status} ${body}`
+      );
+    }
+
+    const body = (await response.json()) as FlowboardData;
+    this.applyHeaderMetadata(response, body);
+
+    return body;
+  }
+
+  private applyHeaderMetadata(response: Response, body: FlowboardData): void {
     const flowId = response.headers.get('x-flowboard-flow-id');
     if (flowId) body.flow_id = flowId;
     const variantId = response.headers.get('x-flowboard-variant-id');
@@ -63,7 +105,5 @@ export class ResolverService {
     if (bucket) body.bucket = bucket;
     const experimentId = response.headers.get('x-flowboard-experiment-id');
     if (experimentId) body.experiment_id = experimentId;
-
-    return body;
   }
 }

package/src/index.tsx

@@ -1,5 +1,6 @@
 export { Flowboard } from './Flowboard';
 export { default as FlowboardProvider } from './FlowboardProvider';
+export { default as FlowboardFlow } from './components/FlowboardFlow';
 export type {
   FlowboardContext,
   CustomScreenBuilder,
@@ -7,5 +8,7 @@ export type {
   OnboardingEndCallback,
   OnStepChangeCallback,
   FlowboardLaunchOptions,
+  FlowboardLaunchByIdOptions,
   FlowboardData,
 } from './types/flowboard';
+export type { FlowboardFlowProps } from './components/FlowboardFlow';

package/src/types/flowboard.ts

@@ -47,4 +47,9 @@ export type FlowboardLaunchOptions = {
   onStepChange?: OnStepChangeCallback;
   enableAnalytics?: boolean;
   alwaysRestart?: boolean;
+  resumeProgress?: boolean;
+};
+
+export type FlowboardLaunchByIdOptions = FlowboardLaunchOptions & {
+  locale?: string;
 };

package/src/types/react-native-peers.d.ts

@@ -0,0 +1,106 @@
+declare module '@react-native-async-storage/async-storage' {
+  const AsyncStorage: any;
+  export default AsyncStorage;
+}
+
+declare module '@react-native-masked-view/masked-view' {
+  import type { ComponentType } from 'react';
+  const MaskedView: ComponentType<any>;
+  export default MaskedView;
+}
+
+declare module 'lottie-react-native' {
+  import type { ComponentType } from 'react';
+  const LottieView: ComponentType<any>;
+  export default LottieView;
+}
+
+declare module 'react-native-device-info' {
+  const DeviceInfo: any;
+  export default DeviceInfo;
+}
+
+declare module 'react-native-in-app-review' {
+  const InAppReview: {
+    isAvailable: () => boolean;
+    RequestInAppReview: () => Promise<boolean>;
+  };
+  export default InAppReview;
+}
+
+declare module 'react-native-linear-gradient' {
+  import type { ComponentType } from 'react';
+  const LinearGradient: ComponentType<any>;
+  export default LinearGradient;
+}
+
+declare module 'react-native-mask-input' {
+  import type { ComponentType } from 'react';
+  const MaskInput: ComponentType<any>;
+  export default MaskInput;
+}
+
+declare module 'react-native-pager-view' {
+  import { Component } from 'react';
+
+  export type PagerViewOnPageSelectedEvent = {
+    nativeEvent: {
+      position: number;
+    };
+  };
+
+  export default class PagerView extends Component<any> {
+    setPage(index: number): void;
+    setPageWithoutAnimation(index: number): void;
+  }
+}
+
+declare module 'react-native-permissions' {
+  export const PERMISSIONS: Record<string, any>;
+  export const RESULTS: Record<string, string>;
+  export function request(permission: string): Promise<string>;
+  export function requestNotifications(
+    options?: string[]
+  ): Promise<{ status: string }>;
+  export function openSettings(): Promise<void>;
+}
+
+declare module 'react-native-safe-area-context' {
+  import type { ComponentType } from 'react';
+  export const SafeAreaProvider: ComponentType<any>;
+  export const SafeAreaView: ComponentType<any>;
+  export const initialWindowMetrics: {
+    insets: {
+      top: number;
+      right: number;
+      bottom: number;
+      left: number;
+    };
+  } | null;
+  export function useSafeAreaInsets(): {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+  };
+}
+
+declare module 'react-native-svg' {
+  import type { ComponentType } from 'react';
+
+  const Svg: ComponentType<any>;
+  export default Svg;
+
+  export const Circle: ComponentType<any>;
+  export const Defs: ComponentType<any>;
+  export const G: ComponentType<any>;
+  export const Line: ComponentType<any>;
+  export const Path: ComponentType<any>;
+  export const Polygon: ComponentType<any>;
+  export const Rect: ComponentType<any>;
+  export const Stop: ComponentType<any>;
+  export const Text: ComponentType<any>;
+  export const TSpan: ComponentType<any>;
+  export const Use: ComponentType<any>;
+  export const LinearGradient: ComponentType<any>;
+}

package/src/utils/flowboardUtils.ts

@@ -102,21 +102,21 @@ export function parseInsets(value: any): Insets {
     return { top: value, right: value, bottom: value, left: value };
   }
   if (value && typeof value === 'object') {
-    if ('horizontal' in value || 'vertical' in value) {
-      const horizontal = Number(value.horizontal ?? 0);
-      const vertical = Number(value.vertical ?? 0);
-      return {
-        top: vertical,
-        right: horizontal,
-        bottom: vertical,
-        left: horizontal,
-      };
-    }
+    const horizontal = Number(value.horizontal ?? 0);
+    const vertical = Number(value.vertical ?? 0);
+    const hasHorizontal = 'horizontal' in value;
+    const hasVertical = 'vertical' in value;
+
+    const top = Number(value.top ?? (hasVertical ? vertical : 0));
+    const right = Number(value.right ?? (hasHorizontal ? horizontal : 0));
+    const bottom = Number(value.bottom ?? (hasVertical ? vertical : 0));
+    const left = Number(value.left ?? (hasHorizontal ? horizontal : 0));
+
     return {
-      top: Number(value.top ?? 0),
-      right: Number(value.right ?? 0),
-      bottom: Number(value.bottom ?? 0),
-      left: Number(value.left ?? 0),
+      top,
+      right,
+      bottom,
+      left,
     };
   }
   return { ...EMPTY_INSETS };
@@ -136,6 +136,20 @@ export function insetsToStyle(insets: Insets): {
   };
 }
 
+export function insetsToMarginStyle(insets: Insets): {
+  marginTop: number;
+  marginRight: number;
+  marginBottom: number;
+  marginLeft: number;
+} {
+  return {
+    marginTop: insets.top,
+    marginRight: insets.right,
+    marginBottom: insets.bottom,
+    marginLeft: insets.left,
+  };
+}
+
 export function formatDate(pattern: string, date = new Date()): string {
   const pad = (value: number, len = 2) => value.toString().padStart(len, '0');
   const replacements: Record<string, string> = {