@umituz/react-native-subscription 2.11.10 → 2.11.11

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.
Files changed (7) hide show
  1. package/package.json +1 -1
  2. package/src/presentation/components/paywall/SubscriptionModal.tsx +10 -0
  3. package/src/presentation/components/paywall/SubscriptionPackageList.tsx +10 -0
  4. package/src/presentation/components/paywall/accordion/AccordionPlanCard.tsx +6 -0
  5. package/src/presentation/components/paywall/accordion/AccordionPlanCardTypes.ts +6 -0
  6. package/src/presentation/components/paywall/accordion/PlanCardDetails.tsx +7 -6
  7. package/src/presentation/components/paywall/accordion/PlanCardHeader.tsx +14 -6
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@umituz/react-native-subscription",
3
- "version": "2.11.10",
3
+ "version": "2.11.11",
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",
package/src/presentation/components/paywall/SubscriptionModal.tsx CHANGED
@@ -36,6 +36,10 @@ export interface SubscriptionModalProps {
36
36
  creditAmounts?: Record<string, number>;
37
37
  /** Optional: Manually specify which package should show "Best Value" badge */
38
38
  bestValueIdentifier?: string;
39
+ /** Optional: Text labels for accordion details */
40
+ billingPeriodLabel?: string;
41
+ totalPriceLabel?: string;
42
+ perMonthLabel?: string;
39
43
  }
40
44
 
41
45
  export const SubscriptionModal: React.FC<SubscriptionModalProps> = React.memo((props) => {
@@ -60,6 +64,9 @@ export const SubscriptionModal: React.FC<SubscriptionModalProps> = React.memo((p
60
64
  showRestoreButton = true,
61
65
  creditAmounts,
62
66
  bestValueIdentifier,
67
+ billingPeriodLabel,
68
+ totalPriceLabel,
69
+ perMonthLabel,
63
70
  } = props;
64
71
 
65
72
  const {
@@ -98,6 +105,9 @@ export const SubscriptionModal: React.FC<SubscriptionModalProps> = React.memo((p
98
105
  emptyText={emptyText}
99
106
  creditAmounts={creditAmounts}
100
107
  bestValueIdentifier={bestValueIdentifier}
108
+ billingPeriodLabel={billingPeriodLabel}
109
+ totalPriceLabel={totalPriceLabel}
110
+ perMonthLabel={perMonthLabel}
101
111
  />
102
112
  </ScrollView>
103
113
 
package/src/presentation/components/paywall/SubscriptionPackageList.tsx CHANGED
@@ -17,6 +17,10 @@ interface SubscriptionPackageListProps {
17
17
  bestValueIdentifier?: string;
18
18
  /** Optional: Map of product identifier to credit amount (e.g., { "weekly": 6, "monthly": 25, "yearly": 300 }) */
19
19
  creditAmounts?: Record<string, number>;
20
+ /** Optional: Text labels for accordion details */
21
+ billingPeriodLabel?: string;
22
+ totalPriceLabel?: string;
23
+ perMonthLabel?: string;
20
24
  }
21
25
 
22
26
  export const SubscriptionPackageList: React.FC<SubscriptionPackageListProps> = React.memo(
@@ -29,6 +33,9 @@ export const SubscriptionPackageList: React.FC<SubscriptionPackageListProps> = R
29
33
  onSelect,
30
34
  bestValueIdentifier,
31
35
  creditAmounts,
36
+ billingPeriodLabel,
37
+ totalPriceLabel,
38
+ perMonthLabel,
32
39
  }) => {
33
40
  const tokens = useAppDesignTokens();
34
41
  const hasPackages = packages.length > 0;
@@ -133,6 +140,9 @@ export const SubscriptionPackageList: React.FC<SubscriptionPackageListProps> = R
133
140
  onToggleExpand={() => handleToggleExpand(packageId)}
134
141
  isBestValue={isBestValue}
135
142
  creditAmount={creditAmount}
143
+ billingPeriodLabel={billingPeriodLabel}
144
+ totalPriceLabel={totalPriceLabel}
145
+ perMonthLabel={perMonthLabel}
136
146
  />
137
147
  );
138
148
  })}
package/src/presentation/components/paywall/accordion/AccordionPlanCard.tsx CHANGED
@@ -22,6 +22,9 @@ export const AccordionPlanCard: React.FC<AccordionPlanCardProps> = React.memo(
22
22
  onToggleExpand,
23
23
  isBestValue = false,
24
24
  creditAmount,
25
+ billingPeriodLabel,
26
+ totalPriceLabel,
27
+ perMonthLabel,
25
28
  }) => {
26
29
  const tokens = useAppDesignTokens();
27
30
  const { t } = useLocalization();
@@ -75,6 +78,9 @@ export const AccordionPlanCard: React.FC<AccordionPlanCardProps> = React.memo(
75
78
  monthlyEquivalent={monthlyEquivalent}
76
79
  periodLabel={periodLabel}
77
80
  isYearly={isYearly}
81
+ billingPeriodLabel={billingPeriodLabel}
82
+ totalPriceLabel={totalPriceLabel}
83
+ perMonthLabel={perMonthLabel}
78
84
  />
79
85
  )}
80
86
  </View>
package/src/presentation/components/paywall/accordion/AccordionPlanCardTypes.ts CHANGED
@@ -13,6 +13,9 @@ export interface AccordionPlanCardProps {
13
13
  onToggleExpand: () => void;
14
14
  isBestValue?: boolean;
15
15
  creditAmount?: number;
16
+ billingPeriodLabel?: string;
17
+ totalPriceLabel?: string;
18
+ perMonthLabel?: string;
16
19
  }
17
20
 
18
21
  export interface PlanCardHeaderProps {
@@ -30,4 +33,7 @@ export interface PlanCardDetailsProps {
30
33
  monthlyEquivalent: string | null;
31
34
  periodLabel: string;
32
35
  isYearly: boolean;
36
+ billingPeriodLabel?: string;
37
+ totalPriceLabel?: string;
38
+ perMonthLabel?: string;
33
39
  }
package/src/presentation/components/paywall/accordion/PlanCardDetails.tsx CHANGED
@@ -9,7 +9,6 @@ import {
9
9
  AtomicText,
10
10
  useAppDesignTokens,
11
11
  } from "@umituz/react-native-design-system";
12
- import { useLocalization } from "@umituz/react-native-localization";
13
12
  import type { PlanCardDetailsProps } from "./AccordionPlanCardTypes";
14
13
 
15
14
  export const PlanCardDetails: React.FC<PlanCardDetailsProps> = ({
@@ -17,9 +16,11 @@ export const PlanCardDetails: React.FC<PlanCardDetailsProps> = ({
17
16
  monthlyEquivalent,
18
17
  periodLabel,
19
18
  isYearly,
19
+ billingPeriodLabel = "Billing Period",
20
+ totalPriceLabel = "Total Price",
21
+ perMonthLabel = "Per Month",
20
22
  }) => {
21
23
  const tokens = useAppDesignTokens();
22
- const { t } = useLocalization();
23
24
 
24
25
  return (
25
26
  <View
@@ -36,13 +37,13 @@ export const PlanCardDetails: React.FC<PlanCardDetailsProps> = ({
36
37
  type="bodyMedium"
37
38
  style={{ color: tokens.colors.textSecondary }}
38
39
  >
39
- {t("paywall.billingPeriod") || "Billing Period"}
40
+ {billingPeriodLabel}
40
41
  </AtomicText>
41
42
  <AtomicText
42
43
  type="bodyMedium"
43
44
  style={{ color: tokens.colors.textPrimary, fontWeight: "600" }}
44
45
  >
45
- {t(`paywall.period.${periodLabel}`)}
46
+ {periodLabel}
46
47
  </AtomicText>
47
48
  </View>
48
49
 
@@ -52,7 +53,7 @@ export const PlanCardDetails: React.FC<PlanCardDetailsProps> = ({
52
53
  type="bodyMedium"
53
54
  style={{ color: tokens.colors.textSecondary }}
54
55
  >
55
- {t("paywall.totalPrice") || "Total Price"}
56
+ {totalPriceLabel}
56
57
  </AtomicText>
57
58
  <AtomicText
58
59
  type="bodyMedium"
@@ -69,7 +70,7 @@ export const PlanCardDetails: React.FC<PlanCardDetailsProps> = ({
69
70
  type="bodyMedium"
70
71
  style={{ color: tokens.colors.textSecondary }}
71
72
  >
72
- {t("paywall.perMonth") || "Per Month"}
73
+ {perMonthLabel}
73
74
  </AtomicText>
74
75
  <AtomicText
75
76
  type="bodyMedium"
package/src/presentation/components/paywall/accordion/PlanCardHeader.tsx CHANGED
@@ -95,16 +95,17 @@ export const PlanCardHeader: React.FC<PlanCardHeaderProps> = ({
95
95
  style={{
96
96
  color: tokens.colors.textPrimary,
97
97
  fontWeight: "700",
98
- marginRight: 8,
99
98
  }}
100
99
  >
101
100
  {price}
102
101
  </AtomicText>
103
- <AtomicIcon
104
- name={isExpanded ? "ChevronUp" : "ChevronDown"}
105
- size={20}
106
- color={tokens.colors.textSecondary as any}
107
- />
102
+ <View style={styles.expandIconContainer}>
103
+ <AtomicIcon
104
+ name={isExpanded ? "ChevronUp" : "ChevronDown"}
105
+ size={18}
106
+ color={tokens.colors.textSecondary as any}
107
+ />
108
+ </View>
108
109
  </View>
109
110
  </View>
110
111
  </TouchableOpacity>
@@ -155,5 +156,12 @@ const styles = StyleSheet.create({
155
156
  rightSection: {
156
157
  flexDirection: "row",
157
158
  alignItems: "center",
159
+ gap: 12,
160
+ },
161
+ expandIconContainer: {
162
+ width: 24,
163
+ height: 24,
164
+ alignItems: "center",
165
+ justifyContent: "center",
158
166
  },
159
167
  });