@umituz/react-native-subscription 2.2.32 → 2.2.33

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-subscription",
-  "version": "2.2.32",
+  "version": "2.2.33",
   "description": "Complete subscription management with RevenueCat, paywall UI, and credits system for React Native apps",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/presentation/components/paywall/PaywallLegalFooter.tsx

@@ -30,11 +30,11 @@ export const PaywallLegalFooter: React.FC<PaywallLegalFooterProps> = React.memo(
     const tokens = useAppDesignTokens();
 
     if (__DEV__) {
-      console.log("[PaywallLegalFooter] Rendering with props:", {
-        hasPrivacyUrl: !!privacyUrl,
-        hasTermsUrl: !!termsUrl,
-        privacyText,
-        termsText: termsText?.substring(0, 20) + "...",
+      console.log("[PaywallLegalFooter] Rendering links:", {
+        privacy: !!privacyUrl,
+        terms: !!termsUrl,
+        pText: privacyText,
+        tText: termsOfServiceText
       });
     }
 
@@ -62,32 +62,42 @@ export const PaywallLegalFooter: React.FC<PaywallLegalFooterProps> = React.memo(
         </AtomicText>
 
         {hasLinks && (
-          <View style={styles.legalLinksContainer}>
-            {privacyUrl && (
-              <TouchableOpacity onPress={handlePrivacyPress} activeOpacity={0.7}>
-                <AtomicText
-                  type="labelSmall"
-                  style={[styles.linkText, { color: tokens.colors.primary }]}
+          <View style={styles.legalLinksWrapper}>
+            <View style={[styles.legalLinksContainer, { borderColor: tokens.colors.border }]}>
+              {privacyUrl && (
+                <TouchableOpacity
+                  onPress={handlePrivacyPress}
+                  activeOpacity={0.6}
+                  style={styles.linkItem}
                 >
-                  {privacyText}
-                </AtomicText>
-              </TouchableOpacity>
-            )}
-            {privacyUrl && termsUrl && (
-              <AtomicText type="labelSmall" style={[styles.separator, { color: tokens.colors.textTertiary }]}>
-                {" • "}
-              </AtomicText>
-            )}
-            {termsUrl && (
-              <TouchableOpacity onPress={handleTermsPress} activeOpacity={0.7}>
-                <AtomicText
-                  type="labelSmall"
-                  style={[styles.linkText, { color: tokens.colors.primary }]}
+                  <AtomicText
+                    type="labelSmall"
+                    style={[styles.linkText, { color: tokens.colors.textSecondary }]}
+                  >
+                    {privacyText}
+                  </AtomicText>
+                </TouchableOpacity>
+              )}
+
+              {privacyUrl && termsUrl && (
+                <View style={[styles.dot, { backgroundColor: tokens.colors.border }]} />
+              )}
+
+              {termsUrl && (
+                <TouchableOpacity
+                  onPress={handleTermsPress}
+                  activeOpacity={0.6}
+                  style={styles.linkItem}
                 >
-                  {termsOfServiceText}
-                </AtomicText>
-              </TouchableOpacity>
-            )}
+                  <AtomicText
+                    type="labelSmall"
+                    style={[styles.linkText, { color: tokens.colors.textSecondary }]}
+                  >
+                    {termsOfServiceText}
+                  </AtomicText>
+                </TouchableOpacity>
+              )}
+            </View>
           </View>
         )}
       </View>
@@ -101,28 +111,45 @@ const styles = StyleSheet.create({
   container: {
     alignItems: "center",
     paddingHorizontal: 24,
-    paddingBottom: 32, // Increased for home indicator safety
+    paddingBottom: 24,
     paddingTop: 8,
     width: "100%",
   },
   termsText: {
     textAlign: "center",
-    fontSize: 11,
-    lineHeight: 16,
-    marginBottom: 10,
+    fontSize: 10,
+    lineHeight: 14,
+    marginBottom: 16,
+    opacity: 0.7,
+  },
+  legalLinksWrapper: {
+    width: "100%",
+    alignItems: "center",
   },
   legalLinksContainer: {
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "center",
-    marginTop: 4,
-    flexWrap: "wrap",
+    paddingVertical: 8,
+    paddingHorizontal: 16,
+    borderRadius: 20,
+    backgroundColor: "rgba(255, 255, 255, 0.03)",
+    borderWidth: 1,
+    borderColor: "rgba(255, 255, 255, 0.05)",
+  },
+  linkItem: {
+    paddingVertical: 2,
   },
   linkText: {
-    textDecorationLine: "underline",
-    fontSize: 12,
+    fontSize: 11,
+    fontWeight: "500",
+    letterSpacing: 0.3,
   },
-  separator: {
-    marginHorizontal: 8,
+  dot: {
+    width: 3,
+    height: 3,
+    borderRadius: 1.5,
+    marginHorizontal: 12,
+    opacity: 0.3,
   },
 });