@umituz/react-native-subscription 2.3.6 → 2.3.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@umituz/react-native-subscription",
|
|
3
|
-
"version": "2.3.
|
|
3
|
+
"version": "2.3.8",
|
|
4
4
|
"description": "Complete subscription management with RevenueCat, paywall UI, and credits system for React Native apps",
|
|
5
5
|
"main": "./src/index.ts",
|
|
6
6
|
"types": "./src/index.ts",
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Best Value Badge Component
|
|
3
|
+
* Single Responsibility: Display a "Best Value" badge for subscription packages
|
|
4
|
+
*/
|
|
5
|
+
|
|
6
|
+
import React from "react";
|
|
7
|
+
import { View, StyleSheet } from "react-native";
|
|
8
|
+
import { AtomicText, useAppDesignTokens } from "@umituz/react-native-design-system";
|
|
9
|
+
|
|
10
|
+
interface BestValueBadgeProps {
|
|
11
|
+
text: string;
|
|
12
|
+
visible?: boolean;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
export const BestValueBadge: React.FC<BestValueBadgeProps> = React.memo(
|
|
16
|
+
({ text, visible = true }) => {
|
|
17
|
+
const tokens = useAppDesignTokens();
|
|
18
|
+
|
|
19
|
+
if (!visible) return null;
|
|
20
|
+
|
|
21
|
+
return (
|
|
22
|
+
<View
|
|
23
|
+
style={[styles.badge, { backgroundColor: tokens.colors.primary }]}
|
|
24
|
+
>
|
|
25
|
+
<AtomicText
|
|
26
|
+
type="labelSmall"
|
|
27
|
+
style={{ color: tokens.colors.onPrimary, fontWeight: "700" }}
|
|
28
|
+
>
|
|
29
|
+
{text}
|
|
30
|
+
</AtomicText>
|
|
31
|
+
</View>
|
|
32
|
+
);
|
|
33
|
+
}
|
|
34
|
+
);
|
|
35
|
+
|
|
36
|
+
BestValueBadge.displayName = "BestValueBadge";
|
|
37
|
+
|
|
38
|
+
const styles = StyleSheet.create({
|
|
39
|
+
badge: {
|
|
40
|
+
position: "absolute",
|
|
41
|
+
top: -12,
|
|
42
|
+
right: 16,
|
|
43
|
+
paddingHorizontal: 16,
|
|
44
|
+
paddingVertical: 7,
|
|
45
|
+
borderRadius: 16,
|
|
46
|
+
zIndex: 1,
|
|
47
|
+
},
|
|
48
|
+
});
|
|
@@ -10,6 +10,7 @@ import { AtomicText } from "@umituz/react-native-design-system";
|
|
|
10
10
|
import { useAppDesignTokens } from "@umituz/react-native-design-system";
|
|
11
11
|
import { formatPrice } from "../../../utils/priceUtils";
|
|
12
12
|
import { useLocalization } from "@umituz/react-native-localization";
|
|
13
|
+
import { BestValueBadge } from "./BestValueBadge";
|
|
13
14
|
|
|
14
15
|
interface SubscriptionPlanCardProps {
|
|
15
16
|
package: PurchasesPackage;
|
|
@@ -63,18 +64,10 @@ export const SubscriptionPlanCard: React.FC<SubscriptionPlanCardProps> =
|
|
|
63
64
|
},
|
|
64
65
|
]}
|
|
65
66
|
>
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
<AtomicText
|
|
71
|
-
type="labelSmall"
|
|
72
|
-
style={{ color: tokens.colors.onPrimary, fontWeight: "600" }}
|
|
73
|
-
>
|
|
74
|
-
{t("paywall.bestValue")}
|
|
75
|
-
</AtomicText>
|
|
76
|
-
</View>
|
|
77
|
-
)}
|
|
67
|
+
<BestValueBadge
|
|
68
|
+
text={t("paywall.bestValue")}
|
|
69
|
+
visible={isBestValue}
|
|
70
|
+
/>
|
|
78
71
|
|
|
79
72
|
<View style={styles.content}>
|
|
80
73
|
<View style={styles.leftSection}>
|
|
@@ -138,14 +131,6 @@ const styles = StyleSheet.create({
|
|
|
138
131
|
padding: 18,
|
|
139
132
|
position: "relative",
|
|
140
133
|
},
|
|
141
|
-
badge: {
|
|
142
|
-
position: "absolute",
|
|
143
|
-
top: -10,
|
|
144
|
-
right: 20,
|
|
145
|
-
paddingHorizontal: 12,
|
|
146
|
-
paddingVertical: 4,
|
|
147
|
-
borderRadius: 8,
|
|
148
|
-
},
|
|
149
134
|
content: {
|
|
150
135
|
flexDirection: "row",
|
|
151
136
|
justifyContent: "space-between",
|