flowboard-react 0.3.0 → 0.4.1

package/src/Flowboard.ts

@@ -3,7 +3,11 @@ import { ClientContext } from './core/clientContext';
 import { ResolverService } from './core/resolverService';
 import { OnboardingRepository } from './core/onboardingRepository';
 import { AnalyticsManager } from './core/analyticsManager';
-import type { FlowboardData, FlowboardLaunchOptions } from './types/flowboard';
+import type {
+  FlowboardData,
+  FlowboardLaunchByIdOptions,
+  FlowboardLaunchOptions,
+} from './types/flowboard';
 
 export type LaunchPayload = {
   data: FlowboardData;
@@ -72,19 +76,7 @@ export class Flowboard {
       );
     }
 
-    try {
-      const context =
-        AnalyticsManager.instance.clientContextSnapshot ??
-        (await ClientContext.create());
-      AnalyticsManager.instance.configure({
-        enabled: options.enableAnalytics ?? true,
-        context,
-      });
-    } catch (error) {
-      Flowboard.log(
-        `Failed to configure analytics for launch: ${String(error)}`
-      );
-    }
+    await Flowboard.configureAnalyticsForLaunch(options.enableAnalytics);
 
     let data = await Flowboard.repository.getOnboardingJson();
 
@@ -117,6 +109,48 @@ export class Flowboard {
       return;
     }
 
+    await Flowboard.launchResolvedOnboarding(data, options);
+  }
+
+  static async launchOnboardingById(
+    onboardingId: string,
+    options: FlowboardLaunchByIdOptions = {}
+  ): Promise<void> {
+    Flowboard.log(`Attempting to launch onboarding by id: ${onboardingId}`);
+    if (!Flowboard.appId) {
+      throw new Error(
+        'Flowboard.init() must be called before launchOnboardingById'
+      );
+    }
+
+    const normalizedOnboardingId = onboardingId.trim();
+    if (!normalizedOnboardingId) {
+      throw new Error('onboardingId must be a non-empty string');
+    }
+
+    await Flowboard.configureAnalyticsForLaunch(options.enableAnalytics);
+
+    const locale = await Flowboard.resolveLocale(options.locale);
+
+    let data: FlowboardData;
+    try {
+      data = await Flowboard.service.fetchOnboardingById({
+        onboardingId: normalizedOnboardingId,
+        locale,
+      });
+    } catch (error) {
+      Flowboard.log(`Failed to load onboarding by id: ${String(error)}`);
+      Alert.alert('Failed to load onboarding', String(error));
+      return;
+    }
+
+    await Flowboard.launchResolvedOnboarding(data, options);
+  }
+
+  private static async launchResolvedOnboarding(
+    data: FlowboardData,
+    options: FlowboardLaunchOptions
+  ): Promise<void> {
     const shouldResumeProgress =
       options.resumeProgress === true && options.alwaysRestart !== true;
 
@@ -159,6 +193,39 @@ export class Flowboard {
     });
   }
 
+  private static async configureAnalyticsForLaunch(
+    enableAnalytics: boolean | undefined
+  ): Promise<void> {
+    try {
+      const context =
+        AnalyticsManager.instance.clientContextSnapshot ??
+        (await ClientContext.create());
+      AnalyticsManager.instance.configure({
+        enabled: enableAnalytics ?? true,
+        context,
+      });
+    } catch (error) {
+      Flowboard.log(
+        `Failed to configure analytics for launch: ${String(error)}`
+      );
+    }
+  }
+
+  private static async resolveLocale(
+    requestedLocale: string | undefined
+  ): Promise<string> {
+    const normalized = requestedLocale?.trim();
+    if (normalized) {
+      return normalized;
+    }
+
+    const context =
+      AnalyticsManager.instance.clientContextSnapshot ??
+      (await ClientContext.create());
+
+    return context.locale || 'en_US';
+  }
+
   private static async initialize(): Promise<void> {
     Flowboard.log('Checking local cache...');
     const cached = await Flowboard.repository.getOnboardingJson();

package/src/components/FlowboardRenderer.tsx

@@ -1594,6 +1594,9 @@ function WheelPicker({
       }),
     [formData, itemTemplate, options, properties]
   );
+  const wheelScrollY = React.useRef(new Animated.Value(0)).current;
+  const wheelScrollRef = React.useRef<any>(null);
+  const lastCommittedWheelValue = React.useRef<string | null>(null);
 
   const toggleSelection = (value: string) => {
     setSelectedValues((prev) => {
@@ -1620,6 +1623,78 @@ function WheelPicker({
 
   const layout = properties.layout ?? 'wheel';
   const spacing = Number(properties.spacing ?? 8);
+  const wheelItemHeight = Math.max(1, Number(properties.wheelItemHeight ?? 48));
+  const requestedVisible = Math.max(
+    3,
+    Math.floor(Number(properties.visibleItems ?? 5))
+  );
+  const visibleItems =
+    requestedVisible % 2 === 0 ? requestedVisible + 1 : requestedVisible;
+  const wheelRowStride = wheelItemHeight + Math.max(0, spacing);
+  const wheelContainerHeight = wheelItemHeight * visibleItems;
+
+  const clampWheelIndex = React.useCallback(
+    (index: number) =>
+      Math.max(0, Math.min(index, Math.max(0, resolvedOptions.length - 1))),
+    [resolvedOptions.length]
+  );
+
+  const getWheelSelectedIndex = React.useCallback(() => {
+    if (resolvedOptions.length === 0) return 0;
+    const targetValue = selectedValues[0];
+    if (targetValue === undefined) return 0;
+    const found = resolvedOptions.findIndex(
+      (option) => String(option.value ?? '') === String(targetValue)
+    );
+    return found >= 0 ? found : 0;
+  }, [resolvedOptions, selectedValues]);
+
+  const commitWheelSelection = React.useCallback(
+    (index: number) => {
+      const safeIndex = clampWheelIndex(index);
+      const selectedOption = resolvedOptions[safeIndex];
+      if (!selectedOption) return;
+      const value = String(selectedOption.value ?? '');
+      if (!value) return;
+
+      setSelectedValues((prev) => {
+        if (prev.length === 1 && prev[0] === value) {
+          return prev;
+        }
+        return [value];
+      });
+
+      if (lastCommittedWheelValue.current !== value) {
+        lastCommittedWheelValue.current = value;
+        onChanged(value);
+        if (properties.autoGoNext === true) {
+          requestAnimationFrame(() =>
+            onAction('next', { selectedValue: value })
+          );
+        }
+      }
+    },
+    [clampWheelIndex, onAction, onChanged, properties.autoGoNext, resolvedOptions]
+  );
+
+  React.useEffect(() => {
+    if (layout !== 'wheel' || resolvedOptions.length === 0) return;
+    const selectedIndex = getWheelSelectedIndex();
+    const offsetY = selectedIndex * wheelRowStride;
+    requestAnimationFrame(() => {
+      wheelScrollRef.current?.scrollTo({
+        y: offsetY,
+        animated: false,
+      });
+      wheelScrollY.setValue(offsetY);
+    });
+  }, [
+    getWheelSelectedIndex,
+    layout,
+    resolvedOptions.length,
+    wheelRowStride,
+    wheelScrollY,
+  ]);
 
   const renderItem = (option: Record<string, any>, index: number) => {
     const value = String(option.value ?? '');
@@ -1697,36 +1772,136 @@ function WheelPicker({
   }
 
   if (layout === 'wheel') {
-    const itemHeight = Math.max(1, Number(properties.wheelItemHeight ?? 48));
-    const requestedVisible = Math.max(
-      3,
-      Math.floor(Number(properties.visibleItems ?? 5))
+    const centerPadding = Math.max(
+      0,
+      (wheelContainerHeight - wheelRowStride) / 2
+    );
+    const centerLineTop = (wheelContainerHeight - wheelItemHeight) / 2;
+    const baseUnselectedStyle =
+      properties.unselectedStyle ?? properties.selectedStyle ?? {};
+    const overlayBorderColor = parseColor(
+      properties.wheelCenterBorderColor ??
+        properties.wheelSelectedBorderColor ??
+        baseUnselectedStyle.borderColor ??
+        '#D6D6DC'
+    );
+    const overlayBackgroundColor = parseColor(
+      properties.wheelCenterBackgroundColor ?? '#24FFFFFF'
     );
-    const visibleItems =
-      requestedVisible % 2 === 0 ? requestedVisible + 1 : requestedVisible;
-    const containerHeight = itemHeight * visibleItems;
-    const centerPadding = Math.max(0, (containerHeight - itemHeight) / 2);
+
+    const handleWheelMomentumEnd = (event: any) => {
+      const offsetY = Number(event?.nativeEvent?.contentOffset?.y ?? 0);
+      const settledIndex = clampWheelIndex(Math.round(offsetY / wheelRowStride));
+      const targetOffset = settledIndex * wheelRowStride;
+      if (Math.abs(targetOffset - offsetY) > 0.5) {
+        wheelScrollRef.current?.scrollTo({
+          y: targetOffset,
+          animated: true,
+        });
+      }
+      commitWheelSelection(settledIndex);
+    };
 
     return (
-      <View style={{ height: containerHeight }}>
-        <ScrollView
+      <View style={{ height: wheelContainerHeight, overflow: 'hidden' }}>
+        <Animated.ScrollView
+          ref={wheelScrollRef}
           showsVerticalScrollIndicator={false}
+          bounces={false}
+          decelerationRate="fast"
+          snapToInterval={wheelRowStride}
+          snapToAlignment="start"
+          disableIntervalMomentum={false}
+          onMomentumScrollEnd={handleWheelMomentumEnd}
           contentContainerStyle={{ paddingVertical: centerPadding }}
+          onScroll={Animated.event(
+            [{ nativeEvent: { contentOffset: { y: wheelScrollY } } }],
+            { useNativeDriver: true }
+          )}
+          scrollEventThrottle={16}
         >
-          {resolvedOptions.map((option, index) => (
-            <View
-              key={`wheel-column-option-${index}`}
-              style={{
-                minHeight: itemHeight,
-                justifyContent: 'center',
-                marginBottom:
-                  spacing > 0 && index < resolvedOptions.length - 1 ? spacing : 0,
-              }}
-            >
-              {renderItem(option, index)}
-            </View>
-          ))}
-        </ScrollView>
+          {resolvedOptions.map((option, index) => {
+            const inputRange = [
+              (index - 2) * wheelRowStride,
+              (index - 1) * wheelRowStride,
+              index * wheelRowStride,
+              (index + 1) * wheelRowStride,
+              (index + 2) * wheelRowStride,
+            ];
+            const opacity = wheelScrollY.interpolate({
+              inputRange,
+              outputRange: [0.35, 0.6, 1, 0.6, 0.35],
+              extrapolate: 'clamp',
+            });
+            const scale = wheelScrollY.interpolate({
+              inputRange,
+              outputRange: [0.82, 0.91, 1, 0.91, 0.82],
+              extrapolate: 'clamp',
+            });
+            const rotateX = wheelScrollY.interpolate({
+              inputRange,
+              outputRange: ['55deg', '28deg', '0deg', '-28deg', '-55deg'],
+              extrapolate: 'clamp',
+            });
+            const translateY = wheelScrollY.interpolate({
+              inputRange,
+              outputRange: [-10, -4, 0, 4, 10],
+              extrapolate: 'clamp',
+            });
+
+            return (
+              <Animated.View
+                key={`wheel-column-option-${index}`}
+                style={{
+                  height: wheelRowStride,
+                  justifyContent: 'center',
+                  opacity,
+                  transform: [
+                    { perspective: 1200 },
+                    { translateY },
+                    { rotateX },
+                    { scale },
+                  ],
+                }}
+              >
+                <View style={{ minHeight: wheelItemHeight, justifyContent: 'center' }}>
+                  {renderItem(option, index)}
+                </View>
+              </Animated.View>
+            );
+          })}
+        </Animated.ScrollView>
+
+        <View
+          pointerEvents="none"
+          style={{
+            position: 'absolute',
+            left: 0,
+            right: 0,
+            top: centerLineTop,
+            height: wheelItemHeight,
+            borderRadius: 14,
+            borderWidth: 1,
+            borderColor: overlayBorderColor,
+            backgroundColor: overlayBackgroundColor,
+          }}
+        />
+        <LinearGradient
+          pointerEvents="none"
+          colors={['rgba(255,255,255,0.92)', 'rgba(255,255,255,0)']}
+          style={{ position: 'absolute', top: 0, left: 0, right: 0, height: centerPadding }}
+        />
+        <LinearGradient
+          pointerEvents="none"
+          colors={['rgba(255,255,255,0)', 'rgba(255,255,255,0.92)']}
+          style={{
+            position: 'absolute',
+            bottom: 0,
+            left: 0,
+            right: 0,
+            height: centerPadding,
+          }}
+        />
       </View>
     );
   }

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

@@ -8,6 +8,7 @@ export type {
   OnboardingEndCallback,
   OnStepChangeCallback,
   FlowboardLaunchOptions,
+  FlowboardLaunchByIdOptions,
   FlowboardData,
 } from './types/flowboard';
 export type { FlowboardFlowProps } from './components/FlowboardFlow';

package/src/types/flowboard.ts

@@ -49,3 +49,7 @@ export type FlowboardLaunchOptions = {
   alwaysRestart?: boolean;
   resumeProgress?: boolean;
 };
+
+export type FlowboardLaunchByIdOptions = FlowboardLaunchOptions & {
+  locale?: string;
+};