@umituz/react-native-subscription 2.39.8 → 2.39.10

package/src/domains/paywall/components/PaywallScreen.tsx

@@ -1,23 +1,31 @@
 /**
  * Paywall Screen Component
  *
- * Full-screen paywall (not modal). Use when you want the paywall
- * to be a standalone screen instead of a modal overlay.
+ * Full-screen paywall with optimized FlatList for performance and modern design.
  */
 
-import React, { useCallback, useEffect } from "react";
-import { View, TouchableOpacity, Linking, StyleSheet } from "react-native";
+import React, { useCallback, useEffect, useMemo } from "react";
+import { 
+  View, 
+  TouchableOpacity, 
+  Linking, 
+  FlatList, 
+  ListRenderItem, 
+  StatusBar,
+} from "react-native";
 import { AtomicText, AtomicIcon, AtomicSpinner } from "@umituz/react-native-design-system/atoms";
 import { useSafeAreaInsets } from "@umituz/react-native-design-system/safe-area";
 import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
-import { ScreenLayout } from "@umituz/react-native-design-system/layouts";
 import { Image } from "expo-image";
 import { PlanCard } from "./PlanCard";
 import { paywallScreenStyles as styles } from "./PaywallScreen.styles";
-import { PaywallFeatures } from "./PaywallFeatures";
 import { PaywallFooter } from "./PaywallFooter";
 import { usePaywallActions } from "../hooks/usePaywallActions";
 import { PaywallScreenProps } from "./PaywallScreen.types";
+import { 
+  calculatePaywallItemLayout, 
+  type PaywallListItem 
+} from "../utils/paywallLayoutUtils";
 
 export const PaywallScreen: React.FC<PaywallScreenProps> = React.memo((props) => {
   const {
@@ -42,14 +50,6 @@ export const PaywallScreen: React.FC<PaywallScreenProps> = React.memo((props) =>
   const tokens = useAppDesignTokens();
   const insets = useSafeAreaInsets();
 
-  if (__DEV__) {
-    console.log("[PaywallScreen] Render:", {
-      packagesCount: packages.length,
-      isLoadingPackages,
-      source,
-    });
-  }
-
   const { selectedPlanId, setSelectedPlanId, isProcessing, handlePurchase, handleRestore } = usePaywallActions({
     packages,
     onPurchase,
@@ -61,7 +61,7 @@ export const PaywallScreen: React.FC<PaywallScreenProps> = React.memo((props) =>
     onClose
   });
 
-  // Auto-select first package when packages load and none is selected
+  // Auto-select first package
   useEffect(() => {
     if (packages.length > 0 && !selectedPlanId) {
       setSelectedPlanId(packages[0].product.identifier);
@@ -73,125 +73,197 @@ export const PaywallScreen: React.FC<PaywallScreenProps> = React.memo((props) =>
     try {
       if (await Linking.canOpenURL(url)) await Linking.openURL(url);
     } catch (error) {
-      console.error('[PaywallScreen] Failed to open URL:', error instanceof Error ? error.message : String(error));
+      console.error('[PaywallScreen] Failed to open URL:', error);
     }
   }, []);
 
-  return (
-    <View style={[screenStyles.container, { backgroundColor: tokens.colors.backgroundPrimary }]}>
-      {/* Close button - positioned absolutely at top */}
-      <View style={[screenStyles.headerContainer, { paddingTop: insets.top }]}>
-        <TouchableOpacity
-          onPress={onClose}
-          style={[screenStyles.closeBtn, { backgroundColor: tokens.colors.surfaceSecondary }]}
-          hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
-        >
-          <AtomicIcon name="close-outline" size="md" customColor={tokens.colors.textPrimary} />
-        </TouchableOpacity>
-      </View>
+  // Prepare flat data for the list
+  const flatData = useMemo(() => {
+    const data: PaywallListItem[] = [];
+    
+    // 1. Header (Hero, Title, Subtitle)
+    data.push({ type: 'HEADER' });
 
-      {/* Scrollable content */}
-      <ScreenLayout
-        scrollable={true}
-        backgroundColor="transparent"
-        contentContainerStyle={{ ...screenStyles.contentContainer, paddingBottom: 120 }}
-      >
-        {/* Hero Image */}
-        {heroImage && (
-          <View style={styles.heroContainer}>
-            <Image source={heroImage} style={styles.heroImage} contentFit="cover" transition={0} />
-          </View>
-        )}
-
-        {/* Header */}
-        <View style={styles.header}>
-          <AtomicText
-            type="headlineMedium"
-            adjustsFontSizeToFit
-            numberOfLines={2}
-            minimumFontScale={0.75}
-            style={[styles.title, { color: tokens.colors.textPrimary }]}
-          >
-            {translations.title}
-          </AtomicText>
-          {translations.subtitle && (
-            <AtomicText
-              type="bodyMedium"
-              adjustsFontSizeToFit
-              numberOfLines={3}
-              minimumFontScale={0.8}
-              style={[styles.subtitle, { color: tokens.colors.textSecondary }]}
-            >
-              {translations.subtitle}
-            </AtomicText>
-          )}
-        </View>
+    // 2. Features Section
+    if (features.length > 0) {
+      data.push({ type: 'FEATURE_HEADER' });
+      features.forEach(feature => {
+        data.push({ type: 'FEATURE', feature });
+      });
+    }
 
-        {/* Features */}
-        <PaywallFeatures features={features} />
-
-        {/* Plans */}
-        <View style={styles.plans}>
-          {isLoadingPackages ? (
-            <View style={styles.loading}>
-              <AtomicSpinner size="md" />
-              {translations.processingText && (
-                <AtomicText
-                  type="bodySmall"
-                  style={[styles.loadingText, { color: tokens.colors.textSecondary }]}
-                >
-                  {translations.processingText}
+    // 3. Plans Section
+    if (packages.length > 0) {
+      data.push({ type: 'PLAN_HEADER' });
+      packages.forEach(pkg => {
+        data.push({ type: 'PLAN', pkg });
+      });
+    }
+
+    return data;
+  }, [features, packages]);
+
+  const renderItem: ListRenderItem<PaywallListItem> = useCallback(({ item }) => {
+    switch (item.type) {
+      case 'HEADER':
+        return (
+          <View key="header">
+            {/* Hero Image */}
+            {heroImage && (
+              <View style={styles.heroContainer}>
+                <Image source={heroImage} style={styles.heroImage} contentFit="cover" transition={200} />
+              </View>
+            )}
+
+            {/* Header Text */}
+            <View style={styles.header}>
+              <AtomicText type="headlineLarge" style={[styles.title, { color: tokens.colors.textPrimary }]}>
+                {translations.title}
+              </AtomicText>
+              {translations.subtitle && (
+                <AtomicText type="bodyMedium" style={[styles.subtitle, { color: tokens.colors.textSecondary }]}>
+                  {translations.subtitle}
                 </AtomicText>
               )}
             </View>
-          ) : packages.length === 0 ? (
-            <View style={styles.loading}>
-              <AtomicText
-                type="bodyMedium"
-                style={{ color: tokens.colors.textSecondary, textAlign: "center" }}
-              >
-                {translations.emptyText ?? "No packages available"}
-              </AtomicText>
+          </View>
+        );
+
+      case 'FEATURE_HEADER':
+        return (
+          <View key="feat-header" style={styles.sectionHeader}>
+            <AtomicText type="labelLarge" style={[styles.sectionTitle, { color: tokens.colors.textSecondary }]}>
+              {translations.featuresTitle || "WHAT'S INCLUDED"}
+            </AtomicText>
+          </View>
+        );
+
+      case 'FEATURE':
+        return (
+          <View key={`feat-${item.feature.text}`} style={[styles.featureRow, { marginHorizontal: 24, marginBottom: 16 }]}>
+            <View style={[styles.featureIcon, { backgroundColor: tokens.colors.primary }]}>
+              <AtomicIcon name={item.feature.icon as any} customSize={16} customColor={tokens.colors.onPrimary} />
             </View>
-          ) : (
-            packages.map((pkg) => {
-              const pid = pkg.product.identifier;
-              const isSelected = selectedPlanId === pid;
-              const isBestValue = bestValueIdentifier === pid;
-              const credits = creditAmounts?.[pid];
-
-              return (
-                <PlanCard
-                  key={pid}
-                  pkg={pkg}
-                  isSelected={isSelected}
-                  badge={isBestValue ? translations.bestValueBadgeText : undefined}
-                  creditAmount={credits}
-                  creditsLabel={creditsLabel}
-                  onSelect={() => setSelectedPlanId(pid)}
-                />
-              );
-            })
-          )}
+            <AtomicText type="bodyMedium" style={[styles.featureText, { color: tokens.colors.textPrimary }]}>
+              {item.feature.text}
+            </AtomicText>
+          </View>
+        );
+
+      case 'PLAN_HEADER':
+        return (
+          <View key="plan-header" style={styles.sectionHeader}>
+            <AtomicText type="labelLarge" style={[styles.sectionTitle, { color: tokens.colors.textSecondary }]}>
+              {translations.plansTitle || "CHOOSE YOUR PLAN"}
+            </AtomicText>
+          </View>
+        );
+
+      case 'PLAN': {
+        const pid = item.pkg.product.identifier;
+        return (
+          <PlanCard
+            key={pid}
+            pkg={item.pkg}
+            isSelected={selectedPlanId === pid}
+            badge={bestValueIdentifier === pid ? translations.bestValueBadgeText : undefined}
+            creditAmount={creditAmounts?.[pid]}
+            creditsLabel={creditsLabel}
+            onSelect={() => setSelectedPlanId(pid)}
+          />
+        );
+      }
+
+      default:
+        return null;
+    }
+  }, [heroImage, translations, tokens, selectedPlanId, bestValueIdentifier, creditAmounts, creditsLabel, setSelectedPlanId]);
+
+  // Performance Optimization: getItemLayout for FlatList
+  const getItemLayout = useCallback((_data: any, index: number) => {
+    return calculatePaywallItemLayout(flatData, index);
+  }, [flatData]);
+
+  const keyExtractor = useCallback((item: PaywallListItem, index: number) => {
+    if (item.type === 'FEATURE') return `feat-${item.feature.text}`;
+    if (item.type === 'PLAN') return `plan-${item.pkg.product.identifier}`;
+    return `${item.type}-${index}`;
+  }, []);
+
+  if (isLoadingPackages) {
+    return (
+      <View style={[styles.container, { backgroundColor: tokens.colors.backgroundPrimary, paddingTop: insets.top }]}>
+        <View style={styles.loadingContainer}>
+          <AtomicSpinner size="lg" />
         </View>
-      </ScreenLayout>
+      </View>
+    );
+  }
+
+  return (
+    <View style={[styles.container, { backgroundColor: tokens.colors.backgroundPrimary }]}>
+      <StatusBar barStyle="light-content" />
+      
+      {/* Absolute Close Button */}
+      <View style={{ 
+        position: 'absolute', 
+        top: Math.max(insets.top, 16), 
+        right: 0, 
+        zIndex: 10,
+      }}>
+        <TouchableOpacity
+          onPress={onClose}
+          style={[styles.closeBtn, { backgroundColor: tokens.colors.surfaceSecondary }]}
+          activeOpacity={0.7}
+        >
+          <AtomicIcon name="close-outline" size="sm" customColor={tokens.colors.textPrimary} />
+        </TouchableOpacity>
+      </View>
+
+      {/* Main Content */}
+      <FlatList
+        data={flatData}
+        renderItem={renderItem}
+        keyExtractor={keyExtractor}
+        getItemLayout={getItemLayout}
+        windowSize={5}
+        removeClippedSubviews={true}
+        initialNumToRender={10}
+        maxToRenderPerBatch={10}
+        updateCellsBatchingPeriod={50}
+        contentContainerStyle={[
+          styles.listContent, 
+          { 
+            paddingTop: Math.max(insets.top, 20) + 40,
+            paddingBottom: 220 
+          }
+        ]}
+        showsVerticalScrollIndicator={false}
+      />
 
-      {/* Fixed footer overlay - always visible at bottom */}
-      <View style={[styles.stickyFooter, { backgroundColor: tokens.colors.backgroundPrimary, paddingBottom: Math.max(insets.bottom, 16) }]}>
+      {/* Fixed Footer */}
+      <View style={[
+        styles.stickyFooter, 
+        { 
+          backgroundColor: tokens.colors.backgroundPrimary,
+          paddingBottom: Math.max(insets.bottom, 24)
+        }
+      ]}>
         <TouchableOpacity
           onPress={handlePurchase}
-          disabled={isProcessing || isLoadingPackages || !selectedPlanId}
+          disabled={isProcessing || !selectedPlanId}
           style={[
             styles.cta,
             { backgroundColor: tokens.colors.primary },
-            (isProcessing || isLoadingPackages || !selectedPlanId) && styles.ctaDisabled
+            (isProcessing || !selectedPlanId) && styles.ctaDisabled
           ]}
-          activeOpacity={0.75}
+          activeOpacity={0.8}
         >
           <AtomicText type="titleLarge" style={[styles.ctaText, { color: tokens.colors.onPrimary }]}>
             {isProcessing ? translations.processingText : translations.purchaseButtonText}
           </AtomicText>
         </TouchableOpacity>
+
         <PaywallFooter
           translations={translations}
           legalUrls={legalUrls}
@@ -205,29 +277,3 @@ export const PaywallScreen: React.FC<PaywallScreenProps> = React.memo((props) =>
 });
 
 PaywallScreen.displayName = "PaywallScreen";
-
-const screenStyles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  headerContainer: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    zIndex: 1000,
-    paddingHorizontal: 12,
-    paddingTop: 12,
-  },
-  closeBtn: {
-    width: 36,
-    height: 36,
-    borderRadius: 18,
-    justifyContent: 'center',
-    alignItems: 'center',
-    alignSelf: 'flex-end',
-  },
-  contentContainer: {
-    paddingTop: 60, // Space for close button
-  },
-});

package/src/domains/paywall/entities/types.ts

@@ -6,6 +6,8 @@ export interface SubscriptionFeature {
 export interface PaywallTranslations {
     title: string;
     subtitle?: string;
+    featuresTitle?: string;
+    plansTitle?: string;
     purchaseButtonText: string;
     restoreButtonText: string;
     loadingText: string;

package/src/domains/paywall/hooks/usePaywallActions.ts

@@ -1,6 +1,6 @@
-import { useState, useCallback, useRef } from "react";
+import { useState, useCallback, useRef, useMemo } from "react";
 import type { PurchasesPackage } from "react-native-purchases";
-import { usePurchaseLoadingStore } from "../../subscription/presentation/stores/purchaseLoadingStore";
+import { usePurchaseLoadingStore, selectIsPurchasing } from "../../subscription/presentation/stores/purchaseLoadingStore";
 import type { PurchaseSource } from "../../subscription/core/SubscriptionConstants";
 
 interface UsePaywallActionsParams {
@@ -26,10 +26,17 @@ export function usePaywallActions({
   const [selectedPlanId, setSelectedPlanId] = useState<string | null>(null);
   const [isLocalProcessing, setIsLocalProcessing] = useState(false);
 
-  const { startPurchase, endPurchase } = usePurchaseLoadingStore();
-  const isGlobalPurchasing = usePurchaseLoadingStore((state) => state.isPurchasing());
-
+  // Use optimized selector for global purchasing state
+  const isGlobalPurchasing = usePurchaseLoadingStore(selectIsPurchasing);
+  
+  // Combine processing states
   const isProcessing = isLocalProcessing || isGlobalPurchasing;
+  
+  // Use ref for isProcessing to keep callbacks stable without re-creating them
+  const isProcessingRef = useRef(isProcessing);
+  isProcessingRef.current = isProcessing;
+
+  const { startPurchase, endPurchase } = usePurchaseLoadingStore();
 
   const onPurchaseRef = useRef(onPurchase);
   const onRestoreRef = useRef(onRestore);
@@ -37,101 +44,86 @@ export function usePaywallActions({
   const onPurchaseErrorRef = useRef(onPurchaseError);
   const onAuthRequiredRef = useRef(onAuthRequired);
   const onCloseRef = useRef(onClose);
+  const packagesRef = useRef(packages);
 
-  // Update refs in render body — always in sync, no 1-frame delay
+  // Update refs in render body — always in sync
   onPurchaseRef.current = onPurchase;
   onRestoreRef.current = onRestore;
   onPurchaseSuccessRef.current = onPurchaseSuccess;
   onPurchaseErrorRef.current = onPurchaseError;
   onAuthRequiredRef.current = onAuthRequired;
   onCloseRef.current = onClose;
+  packagesRef.current = packages;
 
   const handlePurchase = useCallback(async () => {
-    if (!selectedPlanId) {
-      return;
-    }
+    // Access current state via refs to keep callback stable
+    const currentSelectedId = selectedPlanId;
+    if (!currentSelectedId) return;
 
     if (!onPurchaseRef.current) {
-      const err = new Error("Purchase handler not configured");
-      onPurchaseErrorRef.current?.(err);
+      onPurchaseErrorRef.current?.(new Error("Purchase handler not configured"));
       return;
     }
 
-    if (isProcessing) {
-      return;
-    }
+    if (isProcessingRef.current) return;
 
-    const pkg = packages.find((p) => p.product.identifier === selectedPlanId);
+    const pkg = packagesRef.current.find((p) => p.product.identifier === currentSelectedId);
 
     if (!pkg) {
-      if (typeof __DEV__ !== "undefined" && __DEV__) {
-        console.error("[usePaywallActions] Package not found", {
-          selectedPlanId,
-          availablePackages: packages.map(p => p.product.identifier),
-        });
-      }
-      const err = new Error(`Package not found: ${selectedPlanId}`);
-      onPurchaseErrorRef.current?.(err);
+      onPurchaseErrorRef.current?.(new Error(`Package not found: ${currentSelectedId}`));
       return;
     }
 
     setIsLocalProcessing(true);
-    startPurchase(selectedPlanId, "manual");
+    startPurchase(currentSelectedId, "manual");
 
     try {
       const success = await onPurchaseRef.current(pkg);
-
       if (success === true) {
         onPurchaseSuccessRef.current?.();
         onCloseRef.current?.();
       }
     } catch (error) {
-      const err = error instanceof Error ? error : new Error(String(error));
-      onPurchaseErrorRef.current?.(err);
+      onPurchaseErrorRef.current?.(error instanceof Error ? error : new Error(String(error)));
     } finally {
       setIsLocalProcessing(false);
-      endPurchase(selectedPlanId);
+      endPurchase(currentSelectedId);
     }
-  }, [selectedPlanId, packages, isProcessing, startPurchase, endPurchase]);
+  }, [selectedPlanId, startPurchase, endPurchase]); // Only depend on state that must trigger re-creation if changed
 
   const handleRestore = useCallback(async () => {
     if (!onRestoreRef.current) {
-      const err = new Error("Restore handler not configured");
-      onPurchaseErrorRef.current?.(err);
+      onPurchaseErrorRef.current?.(new Error("Restore handler not configured"));
       return;
     }
 
-    if (isProcessing) {
-      return;
-    }
+    if (isProcessingRef.current) return;
 
     setIsLocalProcessing(true);
     try {
       const success = await onRestoreRef.current();
-
       if (success === true) {
         onPurchaseSuccessRef.current?.();
         onCloseRef.current?.();
       }
     } catch (error) {
-      const err = error instanceof Error ? error : new Error(String(error));
-      onPurchaseErrorRef.current?.(err);
+      onPurchaseErrorRef.current?.(error instanceof Error ? error : new Error(String(error)));
     } finally {
       setIsLocalProcessing(false);
     }
-  }, [isProcessing]);
+  }, []); // Truly stable callback
 
   const resetState = useCallback(() => {
     setSelectedPlanId(null);
     setIsLocalProcessing(false);
   }, []);
 
-  return {
+  return useMemo(() => ({
     selectedPlanId,
     setSelectedPlanId,
     isProcessing,
     handlePurchase,
     handleRestore,
     resetState,
-  };
+  }), [selectedPlanId, isProcessing, handlePurchase, handleRestore, resetState]);
 }

package/src/domains/paywall/utils/paywallLayoutUtils.ts

@@ -0,0 +1,55 @@
+import type { PurchasesPackage } from "react-native-purchases";
+import type { SubscriptionFeature } from "../entities/types";
+
+export type PaywallListItem = 
+  | { type: 'HEADER' }
+  | { type: 'FEATURE_HEADER' }
+  | { type: 'FEATURE'; feature: SubscriptionFeature }
+  | { type: 'PLAN_HEADER' }
+  | { type: 'PLAN'; pkg: PurchasesPackage };
+
+/**
+ * Constants for estimated layout heights
+ */
+export const LAYOUT_CONSTANTS = {
+  HEADER_HEIGHT: 300,
+  SECTION_HEADER_HEIGHT: 60,
+  FEATURE_ITEM_HEIGHT: 46,
+  PLAN_ITEM_HEIGHT: 80,
+};
+
+/**
+ * Calculates the offset and length for FlatList items to optimize scrolling performance.
+ */
+export function calculatePaywallItemLayout(data: PaywallListItem[] | null | undefined, index: number) {
+  if (!data) return { length: 0, offset: 0, index };
+
+  let offset = 0;
+  for (let i = 0; i < index; i++) {
+    const item = data[i];
+    offset += getItemHeight(item);
+  }
+
+  const length = getItemHeight(data[index]);
+  
+  return { length, offset, index };
+}
+
+/**
+ * Returns the estimated height of a single paywall list item based on its type.
+ */
+function getItemHeight(item: PaywallListItem): number {
+  switch (item.type) {
+    case 'HEADER':
+      return LAYOUT_CONSTANTS.HEADER_HEIGHT;
+    case 'FEATURE_HEADER':
+    case 'PLAN_HEADER':
+      return LAYOUT_CONSTANTS.SECTION_HEADER_HEIGHT;
+    case 'FEATURE':
+      return LAYOUT_CONSTANTS.FEATURE_ITEM_HEIGHT;
+    case 'PLAN':
+      return LAYOUT_CONSTANTS.PLAN_ITEM_HEIGHT;
+    default:
+      return 0;
+  }
+}

package/src/domains/revenuecat/core/types/RevenueCatData.ts

@@ -1,4 +1,4 @@
-import type { SubscriptionMetadata } from "../../../subscription/core/types";
+import type { SubscriptionMetadata } from "../../../subscription/core/types/SubscriptionMetadata";
 import type { PackageType } from "./RevenueCatTypes";
 
 export interface RevenueCatData extends Omit<SubscriptionMetadata, 'willRenew' | 'productId'> {

package/src/domains/revenuecat/core/types/RevenueCatTypes.ts

@@ -88,9 +88,9 @@ export function isInvalidCredentialsError(error: unknown): boolean {
   return code === "INVALID_CREDENTIALS_ERROR" || code === "9";
 }
 
-export function getRawErrorMessage(error: unknown, fallback: string): string {
+export function getRawErrorMessage(error: unknown): string {
   if (error instanceof Error) {
     return error.message;
   }
-  return fallback;
+  return "Unknown error";
 }

package/src/domains/revenuecat/infrastructure/services/RevenueCatInitializer.types.ts

@@ -1,4 +1,4 @@
-import type { RevenueCatConfig } from "../../core/types";
+import type { RevenueCatConfig } from "../../core/types/RevenueCatConfig";
 
 export interface InitializerDeps {
   config: RevenueCatConfig;

package/src/domains/revenuecat/infrastructure/services/userSwitchHandler.ts

@@ -3,7 +3,7 @@ import type { InitializeResult } from "../../../../shared/application/ports/IRev
 import type { InitializerDeps } from "./RevenueCatInitializer.types";
 import { FAILED_INITIALIZATION_RESULT } from "./initializerConstants";
 import { UserSwitchMutex } from "./UserSwitchMutex";
-import { getPremiumEntitlement } from "../../core/types";
+import { getPremiumEntitlement } from "../../core/types/RevenueCatTypes";
 import { ANONYMOUS_CACHE_KEY, type PeriodType } from "../../../subscription/core/SubscriptionConstants";
 
 declare const __DEV__: boolean;

package/src/domains/subscription/application/SubscriptionInitializerTypes.ts

@@ -1,7 +1,7 @@
 import type { CreditsConfig } from "../../credits/core/Credits";
 import type { UserCreditsDocumentRead } from "../../credits/core/UserCreditsDocument";
 import type { PurchaseSource, PurchaseType } from "../core/SubscriptionConstants";
-import type { SubscriptionMetadata } from "../core/types";
+import type { SubscriptionMetadata } from "../core/types/SubscriptionMetadata";
 
 export interface FirebaseAuthLike {
   currentUser: { uid: string; isAnonymous: boolean } | null;