@app-brew/brewery 1.0.0

package/src/integrations/truefit/src/components/TfApp.tsx

@@ -0,0 +1,159 @@
+import React, { RefObject, useEffect, useRef } from 'react';
+import {
+  Animated,
+  Dimensions,
+  Modal,
+  PanResponder,
+  StyleSheet,
+  TouchableWithoutFeedback,
+  View,
+} from 'react-native';
+import { WebView, WebViewMessageEvent } from 'react-native-webview';
+
+interface TfAppProps {
+  setAppUrl: (appUrl: string) => void;
+  appUrl: string;
+  handleAppMessages: (
+    event: WebViewMessageEvent,
+    appWebViewRef: RefObject<WebView | null>
+  ) => void;
+}
+
+const { height: SCREEN_HEIGHT } = Dimensions.get('window');
+const SHEET_HEIGHT = SCREEN_HEIGHT * 0.9;
+
+export function TfApp({ appUrl, setAppUrl, handleAppMessages }: TfAppProps) {
+  const appWebViewRef = useRef<WebView>(null);
+  const translateY = useRef(new Animated.Value(SHEET_HEIGHT)).current;
+  const isVisible = !!appUrl;
+
+  useEffect(() => {
+    if (isVisible) {
+      Animated.spring(translateY, {
+        toValue: 0,
+        useNativeDriver: true,
+        damping: 20,
+        stiffness: 150,
+      }).start();
+    } else {
+      translateY.setValue(SHEET_HEIGHT);
+    }
+  }, [isVisible, translateY]);
+
+  const closeSheet = () => {
+    Animated.timing(translateY, {
+      toValue: SHEET_HEIGHT,
+      duration: 250,
+      useNativeDriver: true,
+    }).start(() => {
+      setAppUrl('');
+    });
+  };
+
+  const panResponder = useRef(
+    PanResponder.create({
+      onStartShouldSetPanResponder: () => true,
+      onMoveShouldSetPanResponder: (_, gestureState) => {
+        return gestureState.dy > 5;
+      },
+      onPanResponderMove: (_, gestureState) => {
+        if (gestureState.dy > 0) {
+          translateY.setValue(gestureState.dy);
+        }
+      },
+      onPanResponderRelease: (_, gestureState) => {
+        if (gestureState.dy > 100 || gestureState.vy > 0.5) {
+          closeSheet();
+        } else {
+          Animated.spring(translateY, {
+            toValue: 0,
+            useNativeDriver: true,
+            damping: 20,
+            stiffness: 150,
+          }).start();
+        }
+      },
+    })
+  ).current;
+
+  const injectedJsCode = `
+    tfc.event('close', () => { window.ReactNativeWebView.postMessage(JSON.stringify({type: 'close'})); });
+    tfc.event('usertoken', (e) => { window.ReactNativeWebView.postMessage(JSON.stringify({...e, type: 'userToken'})); });
+    tfc.event('refresh', (e) => { window.ReactNativeWebView.postMessage(JSON.stringify({...e, type: 'refresh'})); });
+    tfc.event('openauthwindow', (e) => { window.ReactNativeWebView.postMessage(JSON.stringify({...e, type: 'openAuthWindow'})); });
+    tfc.event('profileupdate', (e) => { window.ReactNativeWebView.postMessage(JSON.stringify({...e, type: 'profileupdate'})); });
+    true;
+  `;
+
+  if (!isVisible) {
+    return null;
+  }
+
+  return (
+    <Modal
+      visible={isVisible}
+      transparent
+      animationType="none"
+      onRequestClose={closeSheet}
+    >
+      <View style={styles.overlay}>
+        <TouchableWithoutFeedback onPress={closeSheet}>
+          <View style={styles.backdrop} />
+        </TouchableWithoutFeedback>
+        <Animated.View
+          style={[
+            styles.sheetContainer,
+            {
+              transform: [{ translateY }],
+            },
+          ]}
+        >
+          <View style={styles.handleContainer} {...panResponder.panHandlers}>
+            <View style={styles.handle} />
+          </View>
+          <WebView
+            ref={appWebViewRef}
+            originWhitelist={['*']}
+            source={{ uri: appUrl }}
+            startInLoadingState={true}
+            injectedJavaScript={injectedJsCode}
+            onMessage={(event) => handleAppMessages(event, appWebViewRef)}
+            style={styles.webview}
+          />
+        </Animated.View>
+      </View>
+    </Modal>
+  );
+}
+
+const styles = StyleSheet.create({
+  overlay: {
+    flex: 1,
+    justifyContent: 'flex-end',
+  },
+  backdrop: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+  },
+  sheetContainer: {
+    height: SHEET_HEIGHT,
+    backgroundColor: 'white',
+    borderTopLeftRadius: 20,
+    borderTopRightRadius: 20,
+    overflow: 'hidden',
+  },
+  handleContainer: {
+    alignItems: 'center',
+    paddingVertical: 10,
+    backgroundColor: 'white',
+  },
+  handle: {
+    width: 40,
+    height: 4,
+    backgroundColor: '#ccc',
+    borderRadius: 2,
+  },
+  webview: {
+    flex: 1,
+  },
+});

package/src/integrations/truefit/src/components/TfWidget.tsx

@@ -0,0 +1,241 @@
+import React, { ReactNode, useEffect, useMemo, useRef, useState } from 'react'
+import { Pressable, StyleSheet, View } from 'react-native'
+import { WebView } from 'react-native-webview'
+
+import constants from '../constants'
+import { cleanupAuthManager } from '../managers/authManager'
+import { MessageManager } from '../managers/messageManager'
+import { fetchToken } from '../managers/tokenManager'
+import { useWidgetEvent } from '../util/useWidgetEvent'
+import { TfApp } from './TfApp'
+
+interface TfWidgetCommonProps {
+  storeKey: string
+  locale: string
+  userId?: string
+  onTokenUpdate?: (token: string) => void
+}
+
+interface TfWidgetProps extends TfWidgetCommonProps {
+  styleId: string
+}
+
+interface TfRegisterWidgetProps extends TfWidgetCommonProps {
+  gender?: string
+  ageGroup?: string
+  productType?: string
+  children?: ReactNode
+}
+
+interface WidgetProps extends TfWidgetProps, TfRegisterWidgetProps {
+  otherWidgets: string
+}
+
+export type RegisterProps = {
+  gender?: string
+  ageGroup?: string
+  productType?: string
+}
+
+export function TfRegisterWidget(props: TfRegisterWidgetProps) {
+  const {
+    storeKey,
+    locale,
+    userId,
+    children,
+    onTokenUpdate,
+    gender,
+    ageGroup,
+    productType,
+  } = props
+  const style = 'widget-element-fitrec-register'
+  return (
+    <Widget
+      storeKey={storeKey}
+      styleId={style}
+      locale={locale}
+      userId={userId}
+      otherWidgets={JSON.stringify([{ type: 'tfc-fitrec-register', style }])}
+      children={children}
+      onTokenUpdate={onTokenUpdate}
+      gender={gender}
+      ageGroup={ageGroup}
+      productType={productType}
+    />
+  )
+}
+
+export function TfWidget(props: TfWidgetProps) {
+  const { storeKey, styleId, locale, userId, onTokenUpdate } = props
+  return (
+    <Widget
+      storeKey={storeKey}
+      styleId={styleId}
+      locale={locale}
+      userId={userId}
+      otherWidgets={'[]'}
+      onTokenUpdate={onTokenUpdate}
+    />
+  )
+}
+
+function Widget(props: WidgetProps) {
+  const {
+    storeKey,
+    styleId,
+    locale,
+    userId = '',
+    otherWidgets,
+    onTokenUpdate,
+    gender,
+    ageGroup,
+    productType,
+    children,
+  } = props
+  const [token, setToken] = useState('')
+  const [widgetUrl, setWidgetUrl] = useState('')
+  const getIframeId = () => {
+    return Math.random().toString(36).substring(2)
+  }
+  const registerProps = useMemo(() => {
+    return {
+      ...(gender && { gender }),
+      ...(ageGroup && { ageGroup }),
+      ...(productType && { productType }),
+    }
+  }, [ageGroup, gender, productType])
+  const [iframeId, setIframeId] = useState(getIframeId())
+
+  useEffect(() => {
+    fetchToken(storeKey).then((tokenRes) => setToken(tokenRes))
+  }, [storeKey])
+
+  // Cleanup auth manager on unmount
+  useEffect(() => {
+    return () => {
+      cleanupAuthManager()
+    }
+  }, [])
+
+  useEffect(() => {
+    if (token) {
+      const hashObj: Record<string, string | boolean> = {
+        type: 'tfc-fitrec-product',
+        styleId,
+        storeKey,
+        deviceType: constants.DEVICE_TYPE,
+        integrationPlatform: constants.INTEGRATION_PLATFORM,
+        cookiesEnabled: true,
+        screenSize: 'small',
+        token,
+        nativeAppSdkIntegration: 'v1',
+        tfIntegrationVersion: 'TF iOS SDK 2024.05',
+        otherWidgets,
+        locale,
+        userId,
+      }
+
+      const hash = Object.entries(hashObj).reduce((acc, [param, value]) => {
+        const hashParam =
+          value != null ? `&${param}=${encodeURIComponent(value)}` : ''
+        return `${acc}${hashParam}`
+      }, `iframeId=${iframeId}`)
+      setWidgetUrl(
+        `${constants.CDN_ORIGIN}/tfp-widgets/7.0-localized/index.html#${hash}`
+      )
+    }
+  }, [token, styleId, storeKey, otherWidgets, locale, userId, iframeId])
+
+  const injectedJsCode = `
+    tfc.event('appOpen', (e) => { window.ReactNativeWebView.postMessage(JSON.stringify(e)); });
+    tfc.event('tokenUpdate', (e) => { window.ReactNativeWebView.postMessage(JSON.stringify(e)); });
+    tfc.event('widgetHeight', (e) => { window.ReactNativeWebView.postMessage(JSON.stringify(e)); });
+    tfc.event('widgetResponse', (e) => { window.ReactNativeWebView.postMessage(JSON.stringify(e)); });
+    true;
+  `
+  const [appUrl, setAppUrl] = useState('')
+  const [appRegisterUrl, setAppRegisterUrl] = useState('')
+  const [widgetHeight, setWidgetHeight] = useState(0)
+  const widgetWebViewRef = useRef<WebView>(null)
+
+  const updateHeight = (newHeight: number) => {
+    if (newHeight) {
+      setWidgetHeight(newHeight)
+    }
+  }
+
+  const messageManager = useMemo(
+    () =>
+      new MessageManager(
+        setAppUrl,
+        widgetWebViewRef,
+        updateHeight,
+        setAppRegisterUrl,
+        locale,
+        styleId,
+        registerProps
+      ),
+    [
+      setAppUrl,
+      widgetWebViewRef,
+      setAppRegisterUrl,
+      locale,
+      styleId,
+      registerProps,
+    ]
+  )
+
+  useWidgetEvent('refresh', () => {
+    setIframeId(getIframeId())
+  })
+
+  useWidgetEvent('tokenUpdate', ({ token: newToken }) => {
+    setToken(newToken)
+    onTokenUpdate?.(newToken)
+  })
+
+  return (
+    <View style={[styles.webViewContainer]}>
+      {widgetUrl ? (
+        <View style={{ height: widgetHeight }} key={widgetUrl}>
+          <WebView
+            ref={widgetWebViewRef}
+            originWhitelist={['*']}
+            source={{ uri: widgetUrl }}
+            startInLoadingState={true}
+            injectedJavaScript={injectedJsCode}
+            style={{ backgroundColor: 'transparent' }}
+            scrollEnabled={false}
+            nestedScrollEnabled={false}
+            onMessage={(event) => messageManager.handleWidgetMessages(event)}
+          />
+        </View>
+      ) : null}
+      {appRegisterUrl && children ? (
+        <Pressable
+          onPress={() =>
+            appRegisterUrl.includes('recipientProfileId')
+              ? setAppUrl(appRegisterUrl + '&ips=manage')
+              : setAppUrl(appRegisterUrl)
+          }
+        >
+          {children}
+        </Pressable>
+      ) : null}
+      <TfApp
+        appUrl={appUrl}
+        setAppUrl={setAppUrl}
+        handleAppMessages={(event, appWebViewRef) =>
+          messageManager.handleAppMessages(event, appWebViewRef)
+        }
+      />
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  webViewContainer: {
+    flex: 0,
+    width: '100%',
+  },
+})

package/src/integrations/truefit/src/constants.ts

@@ -0,0 +1,5 @@
+export default {
+  CDN_ORIGIN: 'https://cdn.truefitcorp.com',
+  DEVICE_TYPE: 'mobile',
+  INTEGRATION_PLATFORM: 'app',
+};

package/src/integrations/truefit/src/index.ts

@@ -0,0 +1,13 @@
+import { TfRegisterWidget, TfWidget } from './components/TfWidget';
+import { fetchToken } from './managers/tokenManager';
+import { trackOrder } from './orderApi';
+
+// Default export
+export default TfWidget;
+
+// Named exports for direct usage
+export { fetchToken, TfRegisterWidget, TfWidget, trackOrder };
+
+// Block exports
+export { TruefitWidget, ProductTruefitWidget } from './blocks';
+export { registerTruefitBlocks } from './register-blocks';

package/src/integrations/truefit/src/managers/authManager.ts

@@ -0,0 +1,140 @@
+import { RefObject } from 'react';
+import { EmitterSubscription, Linking } from 'react-native';
+import { WebView } from 'react-native-webview';
+import { useAppStore } from '@gauntlet/state';
+
+// Auth callback path that Truefit will redirect to
+const AUTH_CALLBACK_PATH = 'truefit-auth';
+
+// Pending auth session - stores the WebView ref to inject result into
+let pendingAuthSession: {
+  appWebViewRef: RefObject<WebView | null>;
+  redirectUrl: string;
+} | null = null;
+
+let linkingSubscription: EmitterSubscription | null = null;
+
+/**
+ * Generates the app's deep link URL for auth callback
+ * Uses deepLinkPrefix from app config (e.g., perfectwhitetee://perfectwhitetee.com)
+ * Result: perfectwhitetee://perfectwhitetee.com/truefit-auth
+ */
+export async function getAuthRedirectUrl(): Promise<string> {
+  // Get deepLinkPrefix from app config - it's an array of prefixes
+  const deepLinkPrefixes = useAppStore.getState().config.data?.store?.deepLinkPrefix;
+  
+  if (deepLinkPrefixes && Array.isArray(deepLinkPrefixes)) {
+    // Find the custom scheme prefix (not https://)
+    // e.g., "perfectwhitetee://perfectwhitetee.com"
+    const customSchemePrefix = deepLinkPrefixes.find(
+      (prefix: string) => !prefix.startsWith('https://') && !prefix.startsWith('http://')
+    );
+    
+    if (customSchemePrefix) {
+      // Remove trailing slash if present, then append auth callback path
+      const baseUrl = customSchemePrefix.endsWith('/') 
+        ? customSchemePrefix.slice(0, -1) 
+        : customSchemePrefix;
+      const redirectUrl = `${baseUrl}/${AUTH_CALLBACK_PATH}`;
+      return redirectUrl;
+    }
+  }
+  
+  // Fallback if deepLinkPrefix is not configured or empty
+  console.warn('truefit deepLinkPrefix not found in config, using fallback');
+  return `truefit://${AUTH_CALLBACK_PATH}`;
+}
+
+/**
+ * Handles incoming deep link URLs for auth callbacks
+ */
+function handleAuthCallback(url: string): boolean {
+  if (!url.includes(AUTH_CALLBACK_PATH) || !pendingAuthSession) {
+    return false;
+  }
+
+  try {
+    // Extract the result parameter from the URL
+    const resultIndex = url.indexOf('result=');
+    if (resultIndex === -1) {
+      console.warn('Truefit auth callback missing result parameter');
+      return false;
+    }
+
+    const result = decodeURIComponent(url.substring(resultIndex + 7));
+    
+    // Inject the result back into the WebView
+    pendingAuthSession.appWebViewRef?.current?.injectJavaScript(
+      `window.postMessage(${result});`
+    );
+
+    // Clear the pending session
+    pendingAuthSession = null;
+    
+    return true;
+  } catch (error) {
+    console.warn('Failed to process Truefit auth callback:', error);
+    return false;
+  }
+}
+
+/**
+ * Starts the auth flow by opening the auth URL in the device browser
+ */
+export async function startAuthSession(
+  authUrl: string,
+  appWebViewRef: RefObject<WebView | null>
+): Promise<void> {
+  // Generate redirect URL
+  const redirectUrl = await getAuthRedirectUrl();
+  
+  // Store the pending session
+  pendingAuthSession = {
+    appWebViewRef,
+    redirectUrl,
+  };
+
+  // Set up listener for the callback (if not already set up)
+  if (!linkingSubscription) {
+    linkingSubscription = Linking.addEventListener('url', ({ url }) => {
+      handleAuthCallback(url);
+    });
+  }
+
+  // Also check if the app was opened with an auth callback URL
+  Linking.getInitialURL().then((url) => {
+    if (url) {
+      handleAuthCallback(url);
+    }
+  });
+
+  // Open the auth URL with the redirect parameter appended
+  const separator = authUrl.includes('?') ? '&' : '?';
+  const fullAuthUrl = `${authUrl}${separator}appLinkRedirectUrl=${encodeURIComponent(redirectUrl)}`;
+  
+  try {
+    await Linking.openURL(fullAuthUrl);
+  } catch (error) {
+    console.warn('Failed to open Truefit auth URL:', error);
+    pendingAuthSession = null;
+    throw error;
+  }
+}
+
+/**
+ * Cancels any pending auth session
+ */
+export function cancelAuthSession(): void {
+  pendingAuthSession = null;
+}
+
+/**
+ * Cleans up the auth manager (call on unmount)
+ */
+export function cleanupAuthManager(): void {
+  if (linkingSubscription) {
+    linkingSubscription.remove();
+    linkingSubscription = null;
+  }
+  pendingAuthSession = null;
+}

package/src/integrations/truefit/src/managers/messageManager.ts

@@ -0,0 +1,122 @@
+import { RefObject } from 'react';
+import { WebView, WebViewMessageEvent } from 'react-native-webview';
+
+import { RegisterProps } from '../components/TfWidget';
+import { emitWidgetEvent } from '../util/useWidgetEvent';
+import { startAuthSession } from './authManager';
+import { updateToken } from './tokenManager';
+
+export class MessageManager {
+  private readonly setAppUrl: (appUrl: string) => void;
+  private readonly widgetWebViewRef: RefObject<WebView | null>;
+  private readonly setWidgetHeight: (height: number) => void;
+  private readonly setAppRegisterUrl: (appRegisterUrl: string) => void;
+  private readonly locale: string;
+  private readonly styleId: string;
+  private readonly registerProps: RegisterProps;
+
+  constructor(
+    setAppUrl: (appUrl: string) => void,
+    widgetWebViewRef: RefObject<WebView | null>,
+    setWidgetHeight: (height: number) => void,
+    setAppRegisterUrl: (appRegisterUrl: string) => void,
+    locale: string,
+    styleId: string,
+    registerProps: RegisterProps
+  ) {
+    this.setAppUrl = setAppUrl;
+    this.widgetWebViewRef = widgetWebViewRef;
+    this.setWidgetHeight = setWidgetHeight;
+    this.setAppRegisterUrl = setAppRegisterUrl;
+    this.locale = locale;
+    this.styleId = styleId;
+    this.registerProps = registerProps;
+  }
+
+  handleWidgetMessages(event: WebViewMessageEvent) {
+    const eventData = JSON.parse(event.nativeEvent.data);
+    switch (eventData.type) {
+      case 'appOpen': {
+        const url = eventData.iframeOrigin + eventData.iframePathAndHash;
+        this.setAppUrl(url);
+        break;
+      }
+      case 'tokenUpdate': {
+        const token = eventData.token;
+        updateToken(token);
+        emitWidgetEvent('tokenUpdate', { token });
+        break;
+      }
+      case 'widgetHeight':
+        this.setWidgetHeight(eventData.height);
+        break;
+      case 'widgetResponse': {
+        if (eventData.bannerRegistration) {
+          const registerParams = eventData.bannerRegistration;
+          const url =
+            registerParams.iframeOrigin +
+            registerParams.iframePathAndHash +
+            `&token=${registerParams.widgetToken}` +
+            (this.registerProps.gender
+              ? `&gender=${this.registerProps.gender}`
+              : '') +
+            (this.registerProps.ageGroup
+              ? `&ageGroup=${this.registerProps.ageGroup}`
+              : '') +
+            (this.registerProps.productType
+              ? `&productType=${this.registerProps.productType}`
+              : '');
+          this.setAppRegisterUrl(url);
+        }
+        break;
+      }
+    }
+  }
+
+  handleAppMessages(
+    event: WebViewMessageEvent,
+    appWebViewRef: RefObject<WebView | null>
+  ) {
+    const eventData = JSON.parse(event.nativeEvent.data);
+    switch (eventData.type) {
+      case 'close':
+        this.setAppUrl('');
+        break;
+      case 'userToken': {
+        const token = eventData.value;
+        updateToken(token);
+        this.widgetWebViewRef?.current?.injectJavaScript(
+          `window.postMessage(${JSON.stringify({ type: 'tokenUpdate', token })});`
+        );
+        emitWidgetEvent('tokenUpdate', { token });
+        break;
+      }
+      case 'refresh': {
+        const widgetVariables = {
+          locale: this.locale,
+          styleId: this.styleId,
+        };
+        const messageObj = JSON.stringify({
+          type: 'widgetRefresh',
+          currentWidget: widgetVariables,
+          immediateOpen: false,
+        });
+        this.widgetWebViewRef?.current?.injectJavaScript(
+          `window.postMessage(${messageObj});`
+        );
+        break;
+      }
+      case 'openAuthWindow': {
+        // Start auth session with deep link callback handling
+        const authUrl = eventData.url;
+        startAuthSession(authUrl, appWebViewRef).catch((err) => {
+          console.warn('Failed to start Truefit auth session:', err);
+        });
+        break;
+      }
+      case 'profileupdate':
+        emitWidgetEvent('refresh', {});
+        break;
+    }
+  }
+}