@dubsdotapp/expo 0.5.18 → 0.5.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dubsdotapp/expo",
-  "version": "0.5.18",
+  "version": "0.5.20",
   "description": "React Native SDK for the Dubs betting platform",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",

package/src/types.ts

@@ -650,4 +650,13 @@ export interface UiConfig {
   appUrl?: string;
   tagline?: string;
   environment?: 'sandbox' | 'production';
+  /**
+   * Whether the developer has uploaded push credentials in the dev portal.
+   * Consumers should gate their push opt-in UI on the relevant platform flag —
+   * e.g. only show the "Enable Notifications" screen if pushConfigured.android is true.
+   */
+  pushConfigured?: {
+    android: boolean;
+    ios: boolean;
+  };
 }

package/src/ui/AuthGate.tsx

@@ -71,7 +71,7 @@ export function AuthGate({
   appName = 'Dubs',
   accentColor,
 }: AuthGateProps) {
-  const { client, pushEnabled } = useDubs();
+  const { client, pushEnabled, uiConfig } = useDubs();
   const auth = useAuth();
   const [phase, setPhase] = useState<'init' | 'active'>('init');
   const [registrationPhase, setRegistrationPhase] = useState(false);
@@ -105,12 +105,20 @@ export function AuthGate({
     if (auth.status === 'needsRegistration') setRegistrationPhase(true);
   }, [auth.status]);
 
-  // Show push setup after new registration completes (not restored sessions)
+  // Show push setup after new registration completes (not restored sessions).
+  // Gated on pushConfigured.android — if the developer hasn't uploaded FCM credentials
+  // for this app in the dev portal, push can't be delivered, so don't prompt.
   useEffect(() => {
-    if (pushEnabled && auth.status === 'authenticated' && registrationPhase && !isRestoredSession) {
+    if (
+      pushEnabled &&
+      uiConfig.pushConfigured?.android &&
+      auth.status === 'authenticated' &&
+      registrationPhase &&
+      !isRestoredSession
+    ) {
       setShowPushSetup(true);
     }
-  }, [pushEnabled, auth.status, registrationPhase, isRestoredSession]);
+  }, [pushEnabled, uiConfig.pushConfigured?.android, auth.status, registrationPhase, isRestoredSession]);
 
   useEffect(() => {
     if (auth.token) onSaveToken(auth.token);
@@ -137,16 +145,15 @@ export function AuthGate({
     return <DefaultLoadingScreen status="authenticating" appName={appName} accentColor={accentColor} />;
   }
 
-  if (auth.status === 'authenticated') {
-    if (showPushSetup) {
-      return (
-        <PushSetupScreen
-          accentColor={accentColor}
-          appName={appName}
-          onComplete={() => setShowPushSetup(false)}
-        />
-      );
-    }
+  // Keep the registration screen mounted through the push step so the transition
+  // from step 3 (referral) → step 4 (push) animates as a continuation of the same flow.
+  const inRegistrationFlow =
+    registrationPhase &&
+    (auth.status === 'needsRegistration' ||
+      auth.status === 'registering' ||
+      (auth.status === 'authenticated' && showPushSetup));
+
+  if (auth.status === 'authenticated' && !inRegistrationFlow) {
     return (
       <AuthContext.Provider value={auth}>
         {pushEnabled && <PushTokenRestorer />}
@@ -155,7 +162,7 @@ export function AuthGate({
     );
   }
 
-  if (registrationPhase) {
+  if (inRegistrationFlow) {
     const isRegistering = auth.status === 'registering';
     const regError = auth.status === 'error' ? auth.error : null;
     if (renderRegistration) {
@@ -169,6 +176,8 @@ export function AuthGate({
         client={client}
         appName={appName}
         accentColor={accentColor}
+        pushStepActive={showPushSetup}
+        onPushComplete={() => setShowPushSetup(false)}
       />
     );
   }
@@ -296,9 +305,17 @@ function DefaultRegistrationScreen({
   client,
   appName,
   accentColor,
-}: RegistrationScreenProps & { appName: string; accentColor?: string }) {
+  pushStepActive,
+  onPushComplete,
+}: RegistrationScreenProps & {
+  appName: string;
+  accentColor?: string;
+  pushStepActive?: boolean;
+  onPushComplete?: () => void;
+}) {
   const t = useDubsTheme();
   const accent = accentColor || t.accent;
+  const push = usePushNotifications();
 
   // ── Shared state ──
   const [step, setStep] = useState(0);
@@ -563,11 +580,84 @@ function DefaultRegistrationScreen({
     </View>
   );
 
+  // Advance to the push step when the parent signals (after auth completes).
+  // Uses the same animateToStep transition as steps 0→1→2 so it feels like
+  // a continuation, not a separate modal swap.
+  useEffect(() => {
+    if (pushStepActive && step !== 3) {
+      animateToStep(3);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [pushStepActive]);
+
+  // ── Step 4: Push Notifications ──
+  const handleEnablePush = async () => {
+    try { await push.register(); } catch {}
+    onPushComplete?.();
+  };
+
+  const renderPushStep = () => (
+    <View style={s.stepContainer}>
+      <View style={s.stepTop}>
+        <Text style={[s.title, { color: t.text }]}>Enable Notifications</Text>
+        <Text style={[s.subtitle, { color: t.textMuted }]}>
+          Stay in the loop with real-time updates
+        </Text>
+        <StepIndicator currentStep={3} />
+
+        <View style={pushStyles.iconContainer}>
+          <View style={[pushStyles.bellCircle, { backgroundColor: accent + '20' }]}>
+            <Text style={[pushStyles.bellIcon, { color: accent }]}>{'🔔'}</Text>
+          </View>
+        </View>
+
+        <View style={pushStyles.benefitsList}>
+          <Text style={[pushStyles.benefitsHeader, { color: t.text }]}>
+            Get real-time updates when:
+          </Text>
+          {[
+            'A fight you picked on goes LIVE',
+            'Your pick wins or loses',
+            'Final results and rankings',
+          ].map((item, i) => (
+            <View key={i} style={pushStyles.benefitRow}>
+              <View style={[pushStyles.bulletDot, { backgroundColor: accent }]} />
+              <Text style={[pushStyles.benefitText, { color: t.textMuted }]}>{item}</Text>
+            </View>
+          ))}
+        </View>
+      </View>
+
+      <View style={s.bottomRow}>
+        <TouchableOpacity
+          style={[s.secondaryBtn, { borderColor: t.border }]}
+          onPress={onPushComplete}
+          activeOpacity={0.7}
+        >
+          <Text style={[s.secondaryBtnText, { color: t.textMuted }]}>Maybe Later</Text>
+        </TouchableOpacity>
+        <TouchableOpacity
+          style={[s.primaryBtn, { backgroundColor: accent, flex: 1, opacity: push.loading ? 0.7 : 1 }]}
+          onPress={handleEnablePush}
+          disabled={push.loading}
+          activeOpacity={0.8}
+        >
+          {push.loading ? (
+            <ActivityIndicator color="#FFFFFF" size="small" />
+          ) : (
+            <Text style={s.primaryBtnText}>Enable Notifications</Text>
+          )}
+        </TouchableOpacity>
+      </View>
+    </View>
+  );
+
   const renderStep = () => {
     switch (step) {
       case 0: return renderAvatarStep();
       case 1: return renderUsernameStep();
       case 2: return renderReferralStep();
+      case 3: return renderPushStep();
       default: return null;
     }
   };
@@ -598,7 +688,7 @@ function DefaultRegistrationScreen({
 // ── Push Token Restorer (silent, zero UI) ──
 // Runs inside DubsContext + AuthGate when user is authenticated.
 // Silently re-registers the push token for returning users who already granted permission.
-// Does NOT prompt — the prompt only happens in PushSetupScreen during onboarding.
+// Does NOT prompt — the prompt only happens in step 4 of DefaultRegistrationScreen during onboarding.
 
 function PushTokenRestorer() {
   const push = usePushNotifications();
@@ -614,101 +704,6 @@ function PushTokenRestorer() {
   return null;
 }
 
-// ── Push Setup Screen (Step 3 of onboarding) ──
-
-function PushSetupScreen({
-  accentColor,
-  appName,
-  onComplete,
-}: {
-  accentColor?: string;
-  appName: string;
-  onComplete: () => void;
-}) {
-  const t = useDubsTheme();
-  const accent = accentColor || t.accent;
-  const push = usePushNotifications();
-  const fadeAnim = useRef(new Animated.Value(0)).current;
-  const slideAnim = useRef(new Animated.Value(30)).current;
-
-  useEffect(() => {
-    Animated.parallel([
-      Animated.timing(fadeAnim, { toValue: 1, duration: 300, useNativeDriver: true }),
-      Animated.timing(slideAnim, { toValue: 0, duration: 300, useNativeDriver: true }),
-    ]).start();
-  }, [fadeAnim, slideAnim]);
-
-  const handleEnable = async () => {
-    await push.register();
-    onComplete();
-  };
-
-  const benefits = [
-    'A fight you picked on goes LIVE',
-    'Your pick wins or loses',
-    'Final results and rankings',
-  ];
-
-  return (
-    <View style={[s.container, { backgroundColor: t.background }]}>
-      <Animated.View
-        style={[
-          s.stepContainer,
-          { opacity: fadeAnim, transform: [{ translateY: slideAnim }] },
-        ]}
-      >
-        <View style={s.stepTop}>
-          <Text style={[s.title, { color: t.text }]}>Enable Notifications</Text>
-          <Text style={[s.subtitle, { color: t.textMuted }]}>
-            Stay in the loop with real-time updates
-          </Text>
-          <StepIndicator currentStep={3} />
-
-          <View style={pushStyles.iconContainer}>
-            <View style={[pushStyles.bellCircle, { backgroundColor: accent + '20' }]}>
-              <Text style={[pushStyles.bellIcon, { color: accent }]}>{'\uD83D\uDD14'}</Text>
-            </View>
-          </View>
-
-          <View style={pushStyles.benefitsList}>
-            <Text style={[pushStyles.benefitsHeader, { color: t.text }]}>
-              Get real-time updates when:
-            </Text>
-            {benefits.map((item, i) => (
-              <View key={i} style={pushStyles.benefitRow}>
-                <View style={[pushStyles.bulletDot, { backgroundColor: accent }]} />
-                <Text style={[pushStyles.benefitText, { color: t.textMuted }]}>{item}</Text>
-              </View>
-            ))}
-          </View>
-        </View>
-
-        <View style={s.bottomRow}>
-          <TouchableOpacity
-            style={[s.secondaryBtn, { borderColor: t.border }]}
-            onPress={onComplete}
-            activeOpacity={0.7}
-          >
-            <Text style={[s.secondaryBtnText, { color: t.textMuted }]}>Maybe Later</Text>
-          </TouchableOpacity>
-          <TouchableOpacity
-            style={[s.primaryBtn, { backgroundColor: accent, flex: 1, opacity: push.loading ? 0.7 : 1 }]}
-            onPress={handleEnable}
-            disabled={push.loading}
-            activeOpacity={0.8}
-          >
-            {push.loading ? (
-              <ActivityIndicator color="#FFFFFF" size="small" />
-            ) : (
-              <Text style={s.primaryBtnText}>Enable Notifications</Text>
-            )}
-          </TouchableOpacity>
-        </View>
-      </Animated.View>
-    </View>
-  );
-}
-
 const pushStyles = StyleSheet.create({
   iconContainer: { alignItems: 'center', marginVertical: 24 },
   bellCircle: { width: 100, height: 100, borderRadius: 50, justifyContent: 'center', alignItems: 'center' },