fix: re-design Monetization modal

XRPL-Labs · Nov 14, 2024 · b1a4ae4 · b1a4ae4
1 parent 1eee339
commit b1a4ae4
Show file tree

Hide file tree

Showing 73 changed files with 867 additions and 357 deletions.
diff --git a/ios/Xaman/Images.xcassets/Graphics/XamanAppIcon.imageset/AppIcon-1024.png b/ios/Xaman/Images.xcassets/Graphics/XamanAppIcon.imageset/AppIcon-1024.png
diff --git a/ios/Xaman/Images.xcassets/Graphics/XamanAppIcon.imageset/Contents.json b/ios/Xaman/Images.xcassets/Graphics/XamanAppIcon.imageset/Contents.json
@@ -0,0 +1,21 @@
+{
+  "images" : [
+    {
+      "filename" : "AppIcon-1024.png",
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}
diff --git a/src/common/constants/endpoints.ts b/src/common/constants/endpoints.ts
@@ -56,3 +56,8 @@ export enum WebLinks {
     // Other
     AppleStoreLink = `https://apps.apple.com/us/app/id1492302343`,
 }
+
+export enum ComplianceLinks {
+    PrivacyStatement = 'https://xrpl-labs.com/static/documents/XRPL-Labs-Privacy-Statement-V1.pdf',
+    TermsOfUse = 'https://xrpl-labs.com/static/documents/XRPL-Labs-Terms-of-Service-V1.pdf',
+}
diff --git a/src/common/constants/screens.ts b/src/common/constants/screens.ts
@@ -42,6 +42,7 @@ const screens = {
         XAppBrowser: 'modal.XAppBrowser',
         DestinationPicker: 'modal.DestinationPicker',
         TransactionLoader: 'modal.TransactionLoader',
+        PurchaseProduct: 'modal.PurchaseProduct',
     },
     Overlay: {
         SwitchAccount: 'overlay.SwitchAccount',
@@ -70,7 +71,6 @@ const screens = {
         SwitchNetwork: 'overlay.SwitchNetwork',
         XAppInfo: 'overlay.XAppInfo',
         NetworkRailsSync: 'overlay.NetworkRailsSync',
-        PurchaseProduct: 'overlay.PurchaseProduct',
     },
     Transaction: {
         Payment: 'app.Transaction.Payment',

diff --git a/src/common/helpers/images.ts b/src/common/helpers/images.ts
@@ -60,6 +60,7 @@ export const Images = {
     // Xaman
     XamanLogo: buildImageSource('XamanLogo', 'xaman_logo'),
     XamanLogoLight: buildImageSource('XamanLogoLight', 'xaman_logo_light'),
+    XamanAppIcon: buildImageSource('XamanAppIcon', 'xaman_app_icon'),
     // Icons
     IconTabBarScan: buildImageSource('IconTabBarScan', 'icon_tabbar_scan'),
     IconTabBarHome: buildImageSource('IconTabBarHome', 'icon_tabbar_home'),

diff --git a/src/components/Modules/MonetizationElement/MonetizationElement.tsx b/src/components/Modules/MonetizationElement/MonetizationElement.tsx
@@ -8,7 +8,7 @@ import { ProfileRepository, UserInteractionRepository } from '@store/repositorie
 import { MonetizationStatus } from '@store/types';
 import { InteractionTypes } from '@store/models/objects/userInteraction';
 
-import { PurchaseProductOverlayProps } from '@screens/Overlay/PurchaseProduct';
+import { PurchaseProductModalProps } from '@screens/Modal/PurchaseProduct';
 
 import { Button, RaisedButton } from '@components/General';
 
@@ -94,7 +94,7 @@ class MonetizationElement extends PureComponent<Props, State> {
     purchaseProduct = () => {
         const { productForPurchase, monetizationType } = this.state;
 
-        Navigator.showOverlay<PurchaseProductOverlayProps>(AppScreens.Overlay.PurchaseProduct, {
+        Navigator.showModal<PurchaseProductModalProps>(AppScreens.Modal.PurchaseProduct, {
             productId: productForPurchase!,
             productDescription: monetizationType!,
             onSuccessPurchase: this.onSuccessPurchase,

diff --git a/src/components/Modules/ProductDetailsElement/ProductDetailsElement.tsx b/src/components/Modules/ProductDetailsElement/ProductDetailsElement.tsx
@@ -3,7 +3,7 @@ import { View, Text, Animated, InteractionManager } from 'react-native';
 
 import { InAppPurchase, ProductDetails } from '@common/libs/iap';
 
-import { Button } from '@components/General';
+import { Button, Icon } from '@components/General';
 
 import Localize from '@locale';
 
@@ -101,24 +101,60 @@ class ProductDetailsElement extends PureComponent<Props, State> {
     renderPlaceHolder = () => {
         return (
             <View style={styles.container}>
-                <View style={[AppStyles.flex1, AppStyles.leftAligned]}>
+                <Animated.Text
+                    style={[styles.description, styles.textPlaceholder, { opacity: this.animatedPlaceholder }]}
+                >
+                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+                </Animated.Text>
+
+                <View style={AppStyles.paddingExtraSml}>
+                    <View style={[AppStyles.row, AppStyles.centerAligned, AppStyles.gapExtraSml]}>
+                        <Icon name="IconCheckXaman" style={styles.checkMarkIconPlaceholder} size={14} />
+                        <Animated.Text
+                            style={[styles.benefitsText, styles.textPlaceholder, { opacity: this.animatedPlaceholder }]}
+                        >
+                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+                        </Animated.Text>
+                    </View>
+                    <View style={[AppStyles.row, AppStyles.centerAligned, AppStyles.gapExtraSml]}>
+                        <Icon name="IconCheckXaman" style={styles.checkMarkIconPlaceholder} size={14} />
+                        <Animated.Text
+                            style={[styles.benefitsText, styles.textPlaceholder, { opacity: this.animatedPlaceholder }]}
+                        >
+                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+                        </Animated.Text>
+                    </View>
+                    <View style={[AppStyles.row, AppStyles.centerAligned, AppStyles.gapExtraSml]}>
+                        <Icon name="IconCheckXaman" style={styles.checkMarkIconPlaceholder} size={14} />
+                        <Animated.Text
+                            style={[styles.benefitsText, styles.textPlaceholder, { opacity: this.animatedPlaceholder }]}
+                        >
+                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+                        </Animated.Text>
+                    </View>
+                </View>
+
+                <View style={styles.priceContainer}>
                     <Animated.Text
-                        style={[styles.description, styles.textPlaceholder, { opacity: this.animatedPlaceholder }]}
+                        style={[styles.price, styles.textPlaceholder, { opacity: this.animatedPlaceholder }]}
                     >
                         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                     </Animated.Text>
                     <Animated.Text
-                        style={[styles.description, styles.textPlaceholder, { opacity: this.animatedPlaceholder }]}
+                        style={[styles.priceDescription, styles.textPlaceholder, { opacity: this.animatedPlaceholder }]}
                     >
                         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-                    </Animated.Text>
-                    <Animated.Text
-                        style={[styles.price, styles.textPlaceholder, { opacity: this.animatedPlaceholder }]}
-                    >
+                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                     </Animated.Text>
                 </View>
@@ -129,17 +165,15 @@ class ProductDetailsElement extends PureComponent<Props, State> {
     renderError = () => {
         return (
             <View style={styles.container}>
-                <View style={AppStyles.flex1}>
-                    <Text style={styles.errorText}>{Localize.t('monetization.couldNotFetchProductDetails')}</Text>
-                    <Button
-                        light
-                        roundedMini
-                        icon="IconRefresh"
-                        iconSize={14}
-                        onPress={this.retryFetchDetails}
-                        label={Localize.t('global.tryAgain')}
-                    />
-                </View>
+                <Text style={styles.errorText}>{Localize.t('monetization.couldNotFetchProductDetails')}</Text>
+                <Button
+                    light
+                    roundedMini
+                    icon="IconRefresh"
+                    iconSize={14}
+                    onPress={this.retryFetchDetails}
+                    label={Localize.t('global.tryAgain')}
+                />
             </View>
         );
     };
@@ -156,14 +190,24 @@ class ProductDetailsElement extends PureComponent<Props, State> {
 
         return (
             <View style={styles.container}>
-                <View style={[AppStyles.flex1, AppStyles.leftAligned]}>
-                    <Text style={styles.description} numberOfLines={2}>
-                        {productDetails?.description || 'Unlock a full month of unlimited app use'}
-                    </Text>
-                    <Text style={styles.price}>
-                        {productDetails?.price}{' '}
-                        <Text style={styles.title}>({Localize.t('monetization.oneTimeCharge')})</Text>
-                    </Text>
+                <Text style={styles.description} numberOfLines={2}>
+                    {productDetails?.description || 'One full month of unrestricted Xaman use'}
+                </Text>
+
+                <View style={AppStyles.paddingExtraSml}>
+                    {['benefitsTextOne', 'benefitsTextTwo', 'benefitsTextThree'].map((benefit, index) => (
+                        <View key={index} style={[AppStyles.row, AppStyles.centerAligned, AppStyles.gapExtraSml]}>
+                            <Icon name="IconCheckXaman" style={styles.checkMarkIcon} size={14} />
+                            <Text style={styles.benefitsText} numberOfLines={1}>
+                                {Localize.t(`monetization.${benefit}`)}
+                            </Text>
+                        </View>
+                    ))}
+                </View>
+
+                <View style={styles.priceContainer}>
+                    <Text style={styles.price}>{productDetails?.price}</Text>
+                    <Text style={styles.priceDescription}>({Localize.t('monetization.oneTimeCharge')})</Text>
                 </View>
             </View>
         );

diff --git a/src/components/Modules/ProductDetailsElement/styles.ts b/src/components/Modules/ProductDetailsElement/styles.ts
@@ -4,33 +4,39 @@ import { AppFonts, AppSizes } from '@theme';
 /* Styles ==================================================================== */
 export default StyleService.create({
     container: {
-        backgroundColor: StyleService.select({ dark: '$light', light: '$darkGrey' }),
-        flexDirection: 'row',
         alignItems: 'center',
-        borderRadius: 10,
-        borderWidth: 1,
-        borderColor: '$tint',
-        paddingHorizontal: AppSizes.paddingSml,
-        paddingVertical: AppSizes.paddingSml,
     },
     tokenImageContainer: {
         marginRight: 10,
     },
     description: {
-        flexWrap: 'wrap',
-        flexShrink: 1,
-        fontSize: AppFonts.p.size,
+        fontSize: AppFonts.subtext.size,
         fontFamily: AppFonts.base.familyBold,
-        color: '$textContrast',
+        paddingHorizontal: AppSizes.padding,
+        paddingVertical: AppSizes.paddingExtraSml,
+        textAlign: 'center',
+        color: '$textPrimary',
     },
-    price: {
-        flexWrap: 'wrap',
-        flexShrink: 1,
-        fontSize: AppFonts.base.size,
-        fontFamily: AppFonts.base.familyMonoBold,
-        color: StyleService.select({ dark: '$darkGrey', light: '$orange' }),
+    benefitsText: {
+        fontSize: AppFonts.small.size,
+        fontFamily: AppFonts.base.familyBold,
+        color: '$orange',
+    },
+    priceContainer: {
+        alignSelf: 'stretch',
+        backgroundColor: StyleService.select({ dark: '$lightOrange', light: '$lightOrange' }),
+        borderRadius: 10,
+        borderWidth: 1,
+        alignItems: 'center',
+        borderColor: '$orange',
+        padding: AppSizes.paddingSml,
         marginTop: AppSizes.paddingSml,
     },
+    price: {
+        fontSize: AppFonts.h4.size,
+        fontFamily: AppFonts.base.familyExtraBold,
+        color: StyleService.select({ dark: '$white', light: '$darkGrey' }),
+    },
     errorContainer: {
         backgroundColor: StyleService.select({ dark: '$lightRed', light: '$red' }),
     },
@@ -41,17 +47,24 @@ export default StyleService.create({
         textAlign: 'center',
         fontSize: AppFonts.subtext.size,
         fontFamily: AppFonts.base.familyBold,
-        color: StyleService.select({ dark: '$darkGrey', light: '$light' }),
+        color: '$red',
     },
     textPlaceholder: {
         color: StyleService.select({ dark: '$grey', light: '$silver' }),
         backgroundColor: StyleService.select({ dark: '$grey', light: '$silver' }),
     },
-    title: {
+    priceDescription: {
         flexWrap: 'wrap',
         flexShrink: 1,
         fontFamily: AppFonts.base.family,
         fontSize: AppFonts.small.size,
-        color: StyleService.select({ dark: '$grey', light: '$silver' }),
+        color: StyleService.select({ dark: '$light', light: '$silver' }),
+    },
+    checkMarkIcon: {
+        tintColor: '$orange',
+    },
+    checkMarkIconPlaceholder: {
+        tintColor: StyleService.select({ dark: '$grey', light: '$silver' }),
+        opacity: 0.8,
     },
 });
diff --git a/src/locale/en.json b/src/locale/en.json
@@ -1187,14 +1187,14 @@
 
   },
   "monetization": {
-    "oneTimeCharge": "One-time charge",
+    "oneTimeCharge": "One-time charge - not automatically renewing",
     "payWithApplePay": "Pay with Apple Pay",
     "payWithGooglePay": "Pay with Google Pay",
-    "restorePurchase": "Restore purchase",
+    "restorePurchase": "Restore Purchase",
     "thankYouForUsingXaman": "Thank you for using Xaman!",
     "comingPaymentWarning": "You're still enjoying Xaman for free, but you're nearing our free limit. To support Xaman's innovation and security, a small in-app payment may be requested soon.",
     "paymentRequiredMessage": "A small payment is required to maintain unlimited access for the next 30 days. Alternatively, Xaman will switch to limited-use mode until your monthly limits reset automatically.",
-    "prePurchaseMessage" : "Thank you for your support! Your payment unlocks a full month of unlimited Xaman use, helping us innovate, provide premium support, and ensure security for your assets.",
+    "prePurchaseMessage" : "Thank you for your support! Your payment unlocks a full month of unrestricted Xaman use.",
     "learnMore": "Learn more",
     "monetizationRequiredForThisFeature": "You currently can’t open Sign Requests & xApps: a small payment is required to unlock a full month of unrestricted use of Xaman. Developing Xaman, building secure software takes a lot of resources. We hope you will support us continuing to build. If you decide not to: every month your limits will reset, allowing you to open xApps & Sign Requests again.",
     "allSet": "All set!",
@@ -1203,7 +1203,13 @@
     "noPreviousPurchases": "We couldn't find any previous purchases to restore. If you believe this is an error, please contact our support team.",
     "errorRestorePurchase": "An unexpected error occurred while checking your purchase history.\n\nPlease try again later or contact our support team if the issue persists.",
     "couldNotFetchProductDetails": "Error fetching product details. Please try again later or contact support if the issue persists.",
-    "purchaseFailed": "Purchase failed!"
+    "purchaseFailed": "Purchase failed!",
+    "termsAndConditions": "Terms and conditions",
+    "privacyPolicy": "Privacy policy",
+    "benefitsTextOne": "Sign payloads",
+    "benefitsTextTwo": "xApp access",
+    "benefitsTextThree": "Premium support",
+    "prePurchaseTip": "Please note that this is a one-month purchase. Make sure your Apple ID is logged in and your payment information is up-to-date. For issues, use the 'Restore Purchase' button."
   },
   "errors": {
     "unableToLoadTermOfService":"Oops! Unable to Retrieve Terms of Service",

diff --git a/src/locale/translations/af.json b/src/locale/translations/af.json
@@ -1186,14 +1186,14 @@
     "oracleDeleteWarning": "Warning: You are about to delete the oracle record identified by the above Oracle Document ID. Keep in mind, this action cannot be undone."
   },
   "monetization": {
-    "oneTimeCharge": "One-time charge",
+    "oneTimeCharge": "One-time charge - not automatically renewing",
     "payWithApplePay": "Pay with Apple Pay",
     "payWithGooglePay": "Pay with Google Pay",
-    "restorePurchase": "Restore purchase",
+    "restorePurchase": "Restore Purchase",
     "thankYouForUsingXaman": "Thank you for using Xaman!",
     "comingPaymentWarning": "You're still enjoying Xaman for free, but you're nearing our free limit. To support Xaman's innovation and security, a small in-app payment may be requested soon.",
     "paymentRequiredMessage": "A small payment is required to maintain unlimited access for the next 30 days. Alternatively, Xaman will switch to limited-use mode until your monthly limits reset automatically.",
-    "prePurchaseMessage": "Thank you for your support! Your payment unlocks a full month of unlimited Xaman use, helping us innovate, provide premium support, and ensure security for your assets.",
+    "prePurchaseMessage": "Thank you for your support! Your payment unlocks a full month of unrestricted Xaman use.",
     "learnMore": "Learn more",
     "monetizationRequiredForThisFeature": "You currently can’t open Sign Requests & xApps: a small payment is required to unlock a full month of unrestricted use of Xaman. Developing Xaman, building secure software takes a lot of resources. We hope you will support us continuing to build. If you decide not to: every month your limits will reset, allowing you to open xApps & Sign Requests again.",
     "allSet": "All set!",
@@ -1202,7 +1202,13 @@
     "noPreviousPurchases": "We couldn't find any previous purchases to restore. If you believe this is an error, please contact our support team.",
     "errorRestorePurchase": "An unexpected error occurred while checking your purchase history.\n\nPlease try again later or contact our support team if the issue persists.",
     "couldNotFetchProductDetails": "Error fetching product details. Please try again later or contact support if the issue persists.",
-    "purchaseFailed": "Purchase failed!"
+    "purchaseFailed": "Purchase failed!",
+    "termsAndConditions": "Terms and conditions",
+    "privacyPolicy": "Privacy policy",
+    "benefitsTextOne": "Sign payloads",
+    "benefitsTextTwo": "xApp access",
+    "benefitsTextThree": "Premium support",
+    "prePurchaseTip": "Please note that this is a one-month purchase. Make sure your Apple ID is logged in and your payment information is up-to-date. For issues, use the 'Restore Purchase' button."
   },
   "errors": {
     "unableToLoadTermOfService": "Oops! Unable to Retrieve Terms of Service",