@developer_tribe/react-builder 1.0.8 → 1.0.9

package/src/mockOS/components/SubscriptionModal.tsx

@@ -0,0 +1,400 @@
+import React, { useCallback, useEffect } from 'react';
+import { useRenderStore } from '../../store';
+
+type SubscriptionModalProps = {
+  productId: string;
+  onBuy: () => void;
+  onCancel: () => void;
+};
+
+export function SubscriptionModal({
+  productId,
+  onBuy,
+  onCancel,
+}: SubscriptionModalProps) {
+  const device = useRenderStore((s) => s.device);
+  const isIOS = device.platform === 'ios';
+
+  const onOverlayClick = useCallback(
+    (e: React.MouseEvent<HTMLDivElement>) => {
+      if (e.target === e.currentTarget) onCancel();
+    },
+    [onCancel],
+  );
+
+  useEffect(() => {
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onCancel();
+    };
+    window.addEventListener('keydown', onKeyDown);
+    return () => window.removeEventListener('keydown', onKeyDown);
+  }, [onCancel]);
+
+  const titleFromProductId = productId
+    .split('.')
+    .slice(-2)
+    .join(' ')
+    .replace(/[-_]/g, ' ')
+    .replace(/\b\w/g, (c) => c.toUpperCase());
+
+  // Bottom sheet (both iOS + Android)
+  return (
+    <div
+      style={{
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        backgroundColor: isIOS ? 'rgba(0, 0, 0, 0.35)' : 'rgba(0, 0, 0, 0.5)',
+        display: 'flex',
+        alignItems: 'flex-end',
+        justifyContent: 'stretch',
+        zIndex: 9999,
+        padding: 0,
+      }}
+      onClick={onOverlayClick}
+    >
+      <div
+        style={{
+          width: '100%',
+          backgroundColor: isIOS
+            ? 'hsl(var(--card, var(--rb-card, 0 0% 100%)) / 0.96)'
+            : 'hsl(var(--card, var(--rb-card, 0 0% 100%)))',
+          borderTopLeftRadius: 16,
+          borderTopRightRadius: 16,
+          overflow: 'hidden',
+          backdropFilter: isIOS ? 'blur(20px)' : undefined,
+          boxShadow: isIOS
+            ? '0 -12px 30px rgba(0,0,0,0.18), 0 -2px 6px rgba(0,0,0,0.08)'
+            : '0 -10px 20px rgba(0,0,0,0.22), 0 -2px 6px rgba(0,0,0,0.14)',
+          paddingBottom: 'max(12px, env(safe-area-inset-bottom))',
+          transform: 'translateY(0px)',
+        }}
+      >
+        <div
+          aria-hidden
+          style={{
+            width: 44,
+            height: 5,
+            borderRadius: 999,
+            background:
+              'hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)) / 0.18)',
+            margin: '10px auto 0',
+          }}
+        />
+
+        {isIOS ? (
+          <div
+            style={{
+              padding: '10px 16px 10px',
+              textAlign: 'center',
+            }}
+          >
+            <div
+              style={{
+                display: 'flex',
+                justifyContent: 'flex-end',
+                marginBottom: 6,
+              }}
+            >
+              <button
+                onClick={onCancel}
+                aria-label="Close"
+                style={{
+                  width: 28,
+                  height: 28,
+                  borderRadius: 999,
+                  border: 'none',
+                  background:
+                    'hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)) / 0.06)',
+                  color:
+                    'hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)) / 0.55)',
+                  fontSize: 18,
+                  lineHeight: '28px',
+                  cursor: 'pointer',
+                }}
+              >
+                ×
+              </button>
+            </div>
+            <div
+              style={{
+                fontSize: 15,
+                fontWeight: 600,
+                color: '#000',
+                marginBottom: 8,
+                lineHeight: 1.3,
+                letterSpacing: 0.2,
+              }}
+            >
+              Confirm with Apple ID
+            </div>
+            <div
+              style={{
+                fontSize: 13,
+                color: '#000',
+                lineHeight: 1.4,
+                opacity: 0.6,
+              }}
+            >
+              Subscribe to <b>{titleFromProductId}</b>
+            </div>
+            <div
+              style={{
+                marginTop: 12,
+                padding: '10px 12px',
+                borderRadius: 12,
+                background:
+                  'hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)) / 0.04)',
+                textAlign: 'left',
+              }}
+            >
+              <div
+                style={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: 10,
+                }}
+              >
+                <div
+                  aria-hidden
+                  style={{
+                    width: 38,
+                    height: 38,
+                    borderRadius: 10,
+                    background:
+                      'linear-gradient(135deg, rgba(0,122,255,0.25), rgba(88,86,214,0.22))',
+                    border: '1px solid rgba(0,0,0,0.06)',
+                  }}
+                />
+                <div style={{ flex: 1, minWidth: 0 }}>
+                  <div
+                    style={{
+                      fontSize: 14,
+                      fontWeight: 600,
+                      color: 'rgba(0,0,0,0.88)',
+                      lineHeight: 1.2,
+                      whiteSpace: 'nowrap',
+                      overflow: 'hidden',
+                      textOverflow: 'ellipsis',
+                    }}
+                    title={productId}
+                  >
+                    {productId}
+                  </div>
+                  <div
+                    style={{
+                      marginTop: 2,
+                      fontSize: 12,
+                      color: 'rgba(0,0,0,0.55)',
+                    }}
+                  >
+                    Renews automatically until cancelled.
+                  </div>
+                </div>
+                <div
+                  style={{
+                    fontSize: 13,
+                    fontWeight: 700,
+                    color: 'rgba(0,0,0,0.8)',
+                  }}
+                >
+                  $4.99
+                </div>
+              </div>
+            </div>
+          </div>
+        ) : (
+          <div style={{ padding: '14px 16px 10px' }}>
+            <div
+              style={{
+                display: 'flex',
+                justifyContent: 'space-between',
+                alignItems: 'center',
+                gap: 12,
+              }}
+            >
+              <div
+                style={{
+                  fontSize: 16,
+                  fontWeight: 600,
+                  color: 'rgba(0,0,0,0.87)',
+                }}
+              >
+                Subscribe with Google Play
+              </div>
+              <button
+                onClick={onCancel}
+                aria-label="Close"
+                style={{
+                  width: 28,
+                  height: 28,
+                  borderRadius: 999,
+                  border: 'none',
+                  background:
+                    'hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)) / 0.06)',
+                  color:
+                    'hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)) / 0.55)',
+                  fontSize: 18,
+                  lineHeight: '28px',
+                  cursor: 'pointer',
+                }}
+              >
+                ×
+              </button>
+            </div>
+            <div
+              style={{
+                marginTop: 8,
+                fontSize: 14,
+                color: 'rgba(0, 0, 0, 0.6)',
+                lineHeight: 1.5,
+              }}
+            >
+              You’re about to subscribe to <b>{titleFromProductId}</b>.
+            </div>
+
+            <div
+              style={{
+                marginTop: 14,
+                padding: '10px 12px',
+                borderRadius: 10,
+                background:
+                  'hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)) / 0.04)',
+                border: '1px solid rgba(0,0,0,0.06)',
+              }}
+            >
+              <div
+                style={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'space-between',
+                  gap: 10,
+                }}
+              >
+                <div style={{ minWidth: 0 }}>
+                  <div
+                    style={{
+                      fontSize: 13,
+                      fontWeight: 600,
+                      color: 'rgba(0,0,0,0.78)',
+                      whiteSpace: 'nowrap',
+                      overflow: 'hidden',
+                      textOverflow: 'ellipsis',
+                    }}
+                  >
+                    {productId}
+                  </div>
+                  <div
+                    style={{
+                      marginTop: 2,
+                      fontSize: 12,
+                      color: 'rgba(0,0,0,0.55)',
+                    }}
+                  >
+                    Auto-renews • Cancel anytime in Play Store
+                  </div>
+                </div>
+                <div
+                  style={{
+                    fontSize: 13,
+                    fontWeight: 700,
+                    color: 'rgba(0,0,0,0.8)',
+                  }}
+                >
+                  $4.99
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {isIOS ? (
+          <div
+            style={{
+              borderTop: '0.5px solid rgba(0, 0, 0, 0.16)',
+              display: 'flex',
+            }}
+          >
+            <button
+              onClick={onCancel}
+              style={{
+                flex: 1,
+                padding: '13px 0',
+                fontSize: 17,
+                fontWeight: 400,
+                color: '#007AFF',
+                background: 'transparent',
+                border: 'none',
+                borderRight: '0.5px solid rgba(0, 0, 0, 0.16)',
+                cursor: 'pointer',
+              }}
+            >
+              Cancel
+            </button>
+            <button
+              onClick={onBuy}
+              style={{
+                flex: 1,
+                padding: '13px 0',
+                fontSize: 17,
+                fontWeight: 600,
+                color: '#007AFF',
+                background: 'transparent',
+                border: 'none',
+                cursor: 'pointer',
+              }}
+            >
+              Subscribe
+            </button>
+          </div>
+        ) : (
+          <div
+            style={{
+              padding: '10px 12px 12px',
+              display: 'flex',
+              justifyContent: 'flex-end',
+              gap: 8,
+            }}
+          >
+            <button
+              onClick={onCancel}
+              style={{
+                padding: '10px 16px',
+                fontSize: 14,
+                fontWeight: 500,
+                color: '#5F6368',
+                background: 'transparent',
+                border: 'none',
+                borderRadius: 4,
+                cursor: 'pointer',
+                textTransform: 'uppercase',
+                letterSpacing: 0.5,
+              }}
+            >
+              Cancel
+            </button>
+            <button
+              onClick={onBuy}
+              style={{
+                padding: '10px 16px',
+                fontSize: 14,
+                fontWeight: 700,
+                color: '#1A73E8',
+                background: 'rgba(26,115,232,0.12)',
+                border: 'none',
+                borderRadius: 999,
+                cursor: 'pointer',
+                textTransform: 'uppercase',
+                letterSpacing: 0.5,
+              }}
+            >
+              Subscribe
+            </button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/mockOS/context/MockOSContext.tsx

@@ -1,6 +1,13 @@
-import React, { ReactNode, useState, useCallback } from 'react';
+import React, {
+  ReactNode,
+  useCallback,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import type { PermissionType } from '../managers/mockPermissionManager';
 import { PermissionModal } from '../components/PermissionModal';
+import { SubscriptionModal } from '../components/SubscriptionModal';
 import { MockOSRouter } from '../components/MockOSRouter';
 import { DeviceStatusBar } from '../../components/DeviceStatusBar';
 import { DeviceNavigationBar } from '../../components/DeviceNavigationBar';
@@ -53,6 +60,12 @@ export function MockOSProvider({
   const [permission, setPermission] = useState<PermissionType | string | null>(
     null,
   );
+  const [subscriptionProductId, setSubscriptionProductId] = useState<
+    string | null
+  >(null);
+  const subscriptionResolverRef = useRef<((result: boolean) => void) | null>(
+    null,
+  );
   const [currentRoute, setCurrentRoute] = useState<RouteType>(defaultRoute);
   const [navigationStack, setNavigationStack] = useState<RouteStackItem[]>([
     { route: defaultRoute, timestamp: Date.now() },
@@ -93,15 +106,46 @@ export function MockOSProvider({
     return false;
   }, [navigationStack]);
 
-  const value: MockOSContextValue = {
-    isEnabled: true,
-    permission,
-    setPermission,
-    currentRoute,
-    navigation,
-    goBack,
-    navigationStack,
-  };
+  const requestSubscriptionPurchase = useCallback((productId: string) => {
+    // Cancel any existing pending request (resolve false)
+    if (subscriptionResolverRef.current) {
+      subscriptionResolverRef.current(false);
+      subscriptionResolverRef.current = null;
+    }
+    setSubscriptionProductId(productId);
+
+    return new Promise<boolean>((resolve) => {
+      subscriptionResolverRef.current = resolve;
+    });
+  }, []);
+
+  const resolveSubscriptionPurchase = useCallback((result: boolean) => {
+    const resolver = subscriptionResolverRef.current;
+    subscriptionResolverRef.current = null;
+    setSubscriptionProductId(null);
+    resolver?.(result);
+  }, []);
+
+  const value: MockOSContextValue = useMemo(
+    () => ({
+      isEnabled: true,
+      permission,
+      setPermission,
+      requestSubscriptionPurchase,
+      currentRoute,
+      navigation,
+      goBack,
+      navigationStack,
+    }),
+    [
+      permission,
+      requestSubscriptionPurchase,
+      currentRoute,
+      navigation,
+      goBack,
+      navigationStack,
+    ],
+  );
 
   const handleAllow = () => {
     setPermission(null);
@@ -120,6 +164,13 @@ export function MockOSProvider({
           onDeny={handleDeny}
         />
       )}
+      {subscriptionProductId !== null && (
+        <SubscriptionModal
+          productId={subscriptionProductId}
+          onBuy={() => resolveSubscriptionPurchase(true)}
+          onCancel={() => resolveSubscriptionPurchase(false)}
+        />
+      )}
       <DeviceStatusBar
         height={statusBarHeight}
         backgroundColor={statusBarBackgroundColor}

package/src/mockOS/context/MockOSContextBase.ts

@@ -17,6 +17,7 @@ export interface MockOSContextValue {
   isEnabled: boolean;
   permission: PermissionType | string | null;
   setPermission: (permission: PermissionType | string | null) => void;
+  requestSubscriptionPurchase: (productId: string) => Promise<boolean>;
   // Router
   currentRoute: RouteType;
   navigation: (route: RouteType) => void;

package/src/mockOS/hooks/useMockIap.ts

@@ -0,0 +1,11 @@
+import { useMemo } from 'react';
+import type { MockOSContextValue } from '../context/MockOSContext';
+import { MockOSIapManager } from '../managers/mockOSIapManager';
+
+export function useMockIap(context: MockOSContextValue | null) {
+  const iapManager = useMemo(() => {
+    return new MockOSIapManager(context);
+  }, [context]);
+
+  return iapManager;
+}

package/src/mockOS/index.ts

@@ -21,7 +21,14 @@ export type {
   NavigationDestination,
   NavigationStackItem,
 } from './managers/navigationManager';
+export { MockOSIapManager } from './managers/mockOSIapManager';
+export { MockSubscriptionManager } from './managers/subscriptionManager';
+export type {
+  SubscriptionPurchaseListener,
+  SubscriptionPurchaseResult,
+} from './managers/subscriptionManager';
 
 // Hooks
 export { useMockPermission } from './hooks/useMockPermission';
 export { useMockNavigation } from './hooks/useMockNavigation';
+export { useMockIap } from './hooks/useMockIap';

package/src/mockOS/managers/mockOSIapManager.ts

@@ -0,0 +1,10 @@
+import type { MockOSContextValue } from '../context/MockOSContext';
+import { MockSubscriptionManager } from './subscriptionManager';
+
+export class MockOSIapManager {
+  public subscription: MockSubscriptionManager;
+
+  constructor(context: MockOSContextValue | null) {
+    this.subscription = new MockSubscriptionManager(context);
+  }
+}

package/src/mockOS/managers/subscriptionManager.ts

@@ -0,0 +1,36 @@
+import type { MockOSContextValue } from '../context/MockOSContext';
+
+export type SubscriptionPurchaseResult = boolean;
+export type SubscriptionPurchaseListener = (
+  result: SubscriptionPurchaseResult,
+) => void;
+
+export class MockSubscriptionManager {
+  private context: MockOSContextValue | null;
+  private listeners = new Set<SubscriptionPurchaseListener>();
+
+  constructor(context: MockOSContextValue | null) {
+    this.context = context;
+  }
+
+  addListener(listener: SubscriptionPurchaseListener): () => void {
+    this.listeners.add(listener);
+    return () => this.listeners.delete(listener);
+  }
+
+  async buy(productId: string): Promise<boolean> {
+    if (this.context === null) {
+      const ok =
+        typeof window !== 'undefined' &&
+        typeof window.confirm === 'function' &&
+        window.confirm(`Subscribe to ${productId}?`);
+      const result = Boolean(ok);
+      this.listeners.forEach((l) => l(result));
+      return result;
+    }
+
+    const result = await this.context.requestSubscriptionPurchase(productId);
+    this.listeners.forEach((l) => l(result));
+    return result;
+  }
+}

package/src/modals/IconPickerModal.tsx

@@ -80,7 +80,7 @@ export function IconPickerModal({
                   borderRadius: 8,
                   border: isActive ? '2px solid #222' : '1px solid #ddd',
                   padding: '8px 10px',
-                  background: '#fff',
+                  background: 'hsl(var(--card, var(--rb-card, 0 0% 100%)))',
                   cursor: 'pointer',
                 }}
                 aria-label={`Select icon ${name}`}