@umituz/react-native-subscription 2.44.0 → 2.45.0

package/src/domains/subscription/presentation/components/feedback/PaywallFeedbackScreen.parts.tsx

@@ -0,0 +1,201 @@
+/**
+ * Paywall Feedback Screen Parts
+ * Sub-components extracted for better maintainability
+ */
+
+import React from "react";
+import { View, TouchableOpacity, ScrollView } from "react-native";
+import { AtomicText, AtomicIcon } from "@umituz/react-native-design-system/atoms";
+import { useSafeAreaInsets } from "@umituz/react-native-design-system/safe-area";
+import { FeedbackOption } from "./FeedbackOption";
+import type { PaywallFeedbackTranslations } from "./PaywallFeedbackScreen.types";
+
+// ============================================================================
+// CLOSE BUTTON
+// ============================================================================
+
+interface FeedbackCloseButtonProps {
+  onPress: () => void;
+  topInset: number;
+  backgroundColor: string;
+  iconColor: string;
+}
+
+export const FeedbackCloseButton: React.FC<FeedbackCloseButtonProps> = ({
+  onPress,
+  topInset,
+  backgroundColor,
+  iconColor,
+}) => (
+  <TouchableOpacity
+    onPress={onPress}
+    style={[{
+      position: 'absolute',
+      top: Math.max(topInset, 12),
+      right: 12,
+      width: 40,
+      height: 40,
+      borderRadius: 20,
+      zIndex: 1000,
+      justifyContent: 'center',
+      alignItems: 'center',
+    }, { backgroundColor }]}
+    hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
+  >
+    <AtomicIcon name="close-outline" size="md" customColor={iconColor} />
+  </TouchableOpacity>
+);
+
+// ============================================================================
+// HEADER
+// ============================================================================
+
+interface FeedbackHeaderProps {
+  title: string;
+  subtitle?: string;
+  titleColor: string;
+  subtitleColor: string;
+  style: any;
+}
+
+export const FeedbackHeader: React.FC<FeedbackHeaderProps> = ({
+  title,
+  subtitle,
+  titleColor,
+  subtitleColor,
+  style,
+}) => (
+  <View style={style}>
+    <AtomicText
+      type="headlineMedium"
+      style={[{
+        marginBottom: 12,
+      }, { color: titleColor }]}
+    >
+      {title}
+    </AtomicText>
+    {subtitle && (
+      <AtomicText
+        type="bodyMedium"
+        style={[{
+          lineHeight: 24,
+        }, { color: subtitleColor }]}
+      >
+        {subtitle}
+      </AtomicText>
+    )}
+  </View>
+);
+
+// ============================================================================
+// OPTIONS LIST
+// ============================================================================
+
+const FEEDBACK_OPTION_IDS = [
+  "too_expensive",
+  "no_need",
+  "trying_out",
+  "technical_issues",
+  "other",
+] as const;
+
+interface FeedbackOptionsListProps {
+  translations: PaywallFeedbackTranslations;
+  selectedReason: string | null;
+  otherText: string;
+  onSelectReason: (reason: string) => void;
+  onSetOtherText: (text: string) => void;
+}
+
+export const FeedbackOptionsList: React.FC<FeedbackOptionsListProps> = ({
+  translations,
+  selectedReason,
+  otherText,
+  onSelectReason,
+  onSetOtherText,
+}) => (
+  <View style={{ gap: 12 }}>
+    {FEEDBACK_OPTION_IDS.map((optionId) => {
+      const isSelected = selectedReason === optionId;
+      const isOther = optionId === "other";
+      const showInput = isSelected && isOther;
+
+      return (
+        <FeedbackOption
+          key={optionId}
+          isSelected={isSelected}
+          text={translations.reasons[optionId]}
+          showInput={showInput}
+          placeholder={translations.otherPlaceholder}
+          inputValue={otherText}
+          onSelect={() => onSelectReason(optionId)}
+          onChangeText={onSetOtherText}
+        />
+      );
+    })}
+  </View>
+);
+
+// ============================================================================
+// SUBMIT BUTTON
+// ============================================================================
+
+interface FeedbackSubmitButtonProps {
+  title: string;
+  canSubmit: boolean;
+  backgroundColor: string;
+  textColor: string;
+  onPress: () => void;
+  bottomInset: number;
+}
+
+export const FeedbackSubmitButton: React.FC<FeedbackSubmitButtonProps> = ({
+  title,
+  canSubmit,
+  backgroundColor,
+  textColor,
+  onPress,
+  bottomInset,
+}) => (
+  <View style={[{
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    right: 0,
+    paddingHorizontal: 24,
+    paddingTop: 18,
+    paddingBottom: Math.max(bottomInset, 18),
+    borderTopWidth: 1,
+    borderTopColor: 'rgba(0,0,0,0.1)',
+  }, { backgroundColor: 'rgba(255,255,255,0.98)' }]}>
+    <TouchableOpacity
+      style={[{
+        borderRadius: 16,
+        paddingVertical: 18,
+        alignItems: 'center',
+        shadowColor: "#000",
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.1,
+        shadowRadius: 4,
+        elevation: 3,
+      }, {
+        backgroundColor: canSubmit ? backgroundColor : 'rgba(0,0,0,0.1)',
+        opacity: canSubmit ? 1 : 0.6,
+      }]}
+      onPress={onPress}
+      disabled={!canSubmit}
+      activeOpacity={0.8}
+    >
+      <AtomicText
+        type="titleLarge"
+        style={[{
+          fontWeight: "700",
+          fontSize: 17,
+          letterSpacing: 0.3,
+        }, { color: canSubmit ? textColor : 'rgba(0,0,0,0.3)' }]}
+      >
+        {title}
+      </AtomicText>
+    </TouchableOpacity>
+  </View>
+);

package/src/domains/subscription/presentation/components/feedback/PaywallFeedbackScreen.tsx

@@ -6,208 +6,112 @@
  * Collects user feedback after they decline the paywall.
  */
 
-import React, { useMemo, useCallback } from "react";
-import { View, ScrollView, TouchableOpacity } from "react-native";
-import { AtomicText, AtomicIcon } from "@umituz/react-native-design-system/atoms";
+import React, { useMemo } from "react";
+import { View, ScrollView } from "react-native";
 import { useSafeAreaInsets } from "@umituz/react-native-design-system/safe-area";
-import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
 import { usePaywallFeedback } from "../../../../../presentation/hooks/feedback/usePaywallFeedback";
-import { FeedbackOption } from "./FeedbackOption";
 import type { PaywallFeedbackScreenProps, PaywallFeedbackTranslations } from "./PaywallFeedbackScreen.types";
+import {
+  FeedbackCloseButton,
+  FeedbackHeader,
+  FeedbackOptionsList,
+  FeedbackSubmitButton,
+} from "./PaywallFeedbackScreen.parts";
 
 // Re-export types for convenience
 export type { PaywallFeedbackTranslations, PaywallFeedbackScreenProps };
 
-const FEEDBACK_OPTION_IDS = [
-    "too_expensive",
-    "no_need",
-    "trying_out",
-    "technical_issues",
-    "other",
-] as const;
-
 export const PaywallFeedbackScreen: React.FC<PaywallFeedbackScreenProps> = React.memo(({
-    translations,
-    onClose,
-    onSubmit,
+  translations,
+  onClose,
+  onSubmit,
 }) => {
-    const tokens = useAppDesignTokens();
-    const insets = useSafeAreaInsets();
-
-    const {
-        selectedReason,
-        otherText,
-        setOtherText,
-        selectReason,
-        handleSubmit,
-        handleSkip,
-        canSubmit,
-    } = usePaywallFeedback({ onSubmit, onClose });
-
-    const screenStyles = useMemo(() => createScreenStyles(tokens, insets), [tokens, insets]);
+  const insets = useSafeAreaInsets();
 
-    const handleSkipPress = useCallback(() => {
-        handleSkip();
-    }, [handleSkip]);
+  const {
+    selectedReason,
+    otherText,
+    setOtherText,
+    selectReason,
+    handleSubmit,
+    handleSkip,
+    canSubmit,
+  } = usePaywallFeedback({ onSubmit, onClose });
 
-    return (
-        <View style={[screenStyles.container, { backgroundColor: tokens.colors.backgroundPrimary }]}>
-            {/* Close button */}
-            <TouchableOpacity
-                onPress={handleSkipPress}
-                style={[screenStyles.closeBtn, { backgroundColor: tokens.colors.surfaceSecondary, top: Math.max(insets.top, 12) }]}
-                hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
-            >
-                <AtomicIcon name="close-outline" size="md" customColor={tokens.colors.textPrimary} />
-            </TouchableOpacity>
+  const screenStyles = useMemo(() => createScreenStyles(insets), [insets]);
 
-            {/* Scrollable content */}
-            <ScrollView
-                style={screenStyles.scrollContainer}
-                contentContainerStyle={screenStyles.scrollContent}
-                showsVerticalScrollIndicator={false}
-            >
-                {/* Header */}
-                <View style={screenStyles.header}>
-                    <AtomicText
-                        type="headlineMedium"
-                        style={[screenStyles.title, { color: tokens.colors.textPrimary }]}
-                    >
-                        {translations.title}
-                    </AtomicText>
-                    {translations.subtitle && (
-                        <AtomicText
-                            type="bodyMedium"
-                            style={[screenStyles.subtitle, { color: tokens.colors.textSecondary }]}
-                        >
-                            {translations.subtitle}
-                        </AtomicText>
-                    )}
-                </View>
+  return (
+    <View style={[screenStyles.container, { backgroundColor: 'white', opacity: 1 }]}>
+      {/* Close button */}
+      <FeedbackCloseButton
+        onPress={handleSkip}
+        topInset={insets.top}
+        backgroundColor="rgba(0,0,0,0.05)"
+        iconColor="#000"
+      />
 
-                {/* Feedback options */}
-                <View style={screenStyles.optionsContainer}>
-                    {FEEDBACK_OPTION_IDS.map((optionId) => {
-                        const isSelected = selectedReason === optionId;
-                        const isOther = optionId === "other";
-                        const showInput = isSelected && isOther;
+      {/* Scrollable content */}
+      <ScrollView
+        style={screenStyles.scrollContainer}
+        contentContainerStyle={screenStyles.scrollContent}
+        showsVerticalScrollIndicator={false}
+      >
+        {/* Header */}
+        <FeedbackHeader
+          title={translations.title}
+          subtitle={translations.subtitle}
+          titleColor="#000"
+          subtitleColor="#666"
+          style={screenStyles.header}
+        />
 
-                        return (
-                            <FeedbackOption
-                                key={optionId}
-                                isSelected={isSelected}
-                                text={translations.reasons[optionId]}
-                                showInput={showInput}
-                                placeholder={translations.otherPlaceholder}
-                                inputValue={otherText}
-                                onSelect={() => selectReason(optionId)}
-                                onChangeText={setOtherText}
-                            />
-                        );
-                    })}
-                </View>
-            </ScrollView>
-
-            {/* Sticky footer - Submit button */}
-            <View style={[screenStyles.footer, { paddingBottom: Math.max(insets.bottom, 16) }]}>
-                <TouchableOpacity
-                    style={[
-                        screenStyles.submitButton,
-                        {
-                            backgroundColor: canSubmit ? tokens.colors.primary : tokens.colors.surfaceSecondary,
-                            opacity: canSubmit ? 1 : 0.6,
-                        }
-                    ]}
-                    onPress={handleSubmit}
-                    disabled={!canSubmit}
-                    activeOpacity={0.8}
-                >
-                    <AtomicText
-                        type="titleLarge"
-                        style={[
-                            screenStyles.submitText,
-                            { color: canSubmit ? tokens.colors.onPrimary : tokens.colors.textDisabled }
-                        ]}
-                    >
-                        {translations.submit}
-                    </AtomicText>
-                </TouchableOpacity>
-            </View>
+        {/* Feedback options */}
+        <View style={screenStyles.optionsContainer}>
+          <FeedbackOptionsList
+            translations={translations}
+            selectedReason={selectedReason}
+            otherText={otherText}
+            onSelectReason={selectReason}
+            onSetOtherText={setOtherText}
+          />
         </View>
-    );
+      </ScrollView>
+
+      {/* Submit button */}
+      <FeedbackSubmitButton
+        title={translations.submit}
+        canSubmit={canSubmit}
+        backgroundColor="#007AFF"
+        textColor="#FFF"
+        onPress={handleSubmit}
+        bottomInset={insets.bottom}
+      />
+    </View>
+  );
 });
 
 PaywallFeedbackScreen.displayName = "PaywallFeedbackScreen";
 
-const createScreenStyles = (
-    tokens: {
-        colors: { backgroundPrimary: string; border: string; onPrimary: string; textDisabled: string; surfaceSecondary: string; primary: string };
-        spacing: { xl: number; sm: number; md: number; lg: number };
-    },
-    _insets: { top: number; bottom: number }
-) => ({
-    container: {
-        flex: 1,
-        opacity: 1,
-    },
-    closeBtn: {
-        position: 'absolute' as const,
-        top: 12,
-        right: 12,
-        width: 40,
-        height: 40,
-        borderRadius: 20,
-        zIndex: 1000,
-        justifyContent: 'center' as const,
-        alignItems: 'center' as const,
-    },
-    scrollContainer: {
-        flex: 1,
-    },
-    scrollContent: {
-        paddingTop: 80,
-        paddingBottom: 120,
-    },
-    header: {
-        paddingHorizontal: tokens.spacing.xl,
-        marginBottom: tokens.spacing.xl + 8,
-    },
-    title: {
-        marginBottom: tokens.spacing.md + 4,
-    },
-    subtitle: {
-        lineHeight: 24,
-    },
-    optionsContainer: {
-        paddingHorizontal: tokens.spacing.xl,
-        gap: tokens.spacing.md,
-    },
-    footer: {
-        position: 'absolute' as const,
-        bottom: 0,
-        left: 0,
-        right: 0,
-        paddingHorizontal: tokens.spacing.xl,
-        paddingTop: tokens.spacing.lg,
-        paddingBottom: tokens.spacing.lg,
-        backgroundColor: tokens.colors.backgroundPrimary,
-        borderTopWidth: 1,
-        borderTopColor: tokens.colors.border,
-        opacity: 1,
-    },
-    submitButton: {
-        borderRadius: 16,
-        paddingVertical: 18,
-        alignItems: 'center' as const,
-        shadowColor: "#000",
-        shadowOffset: { width: 0, height: 2 },
-        shadowOpacity: 0.1,
-        shadowRadius: 4,
-        elevation: 3,
-    },
-    submitText: {
-        fontWeight: "700" as const,
-        fontSize: 17,
-        letterSpacing: 0.3,
-    },
+// ============================================================================
+// STYLES
+// ============================================================================
+
+const createScreenStyles = (insets: { top: number; bottom: number }) => ({
+  container: {
+    flex: 1,
+  },
+  scrollContainer: {
+    flex: 1,
+  },
+  scrollContent: {
+    paddingTop: 80,
+    paddingBottom: 120,
+  },
+  header: {
+    paddingHorizontal: 24,
+    marginBottom: 32,
+  },
+  optionsContainer: {
+    paddingHorizontal: 24,
+  },
 });