Merge pull request #262 from internxt/feature/open-internxt-link-to-buy-plan

[_] feature/Add redirection in plans buttons to web links

Author: CandelR

android/app/build.gradle

@@ -88,8 +88,8 @@ android {
         applicationId 'com.internxt.cloud'
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 101
-        versionName "1.7.1"
+        versionCode 103
+        versionName "1.7.2"
 
         buildConfigField("boolean", "REACT_NATIVE_UNSTABLE_USE_RUNTIME_SCHEDULER_ALWAYS", (findProperty("reactNative.unstable_useRuntimeSchedulerAlways") ?: true).toString())
     }

android/app/src/main/res/values/strings.xml

@@ -2,5 +2,5 @@
   <string name="app_name">Internxt</string>
   <string name="expo_splash_screen_resize_mode" translatable="false">cover</string>
   <string name="expo_splash_screen_status_bar_translucent" translatable="false">false</string>
-  <string name="expo_runtime_version">1.7.0</string>
+  <string name="expo_runtime_version">1.7.2</string>
 </resources>

ios/Internxt/Info.plist

@@ -19,7 +19,7 @@
     <key>CFBundlePackageType</key>
     <string>$(PRODUCT_BUNDLE_PACKAGE_TYPE)</string>
     <key>CFBundleShortVersionString</key>
-    <string>1.7.1</string>
+    <string>1.7.2</string>
     <key>CFBundleSignature</key>
     <string>????</string>
     <key>CFBundleURLTypes</key>

ios/Internxt/Supporting/Expo.plist

@@ -9,7 +9,7 @@
     <key>EXUpdatesLaunchWaitMs</key>
     <integer>0</integer>
     <key>EXUpdatesRuntimeVersion</key>
-    <string>1.7.0</string>
+    <string>1.7.2</string>
     <key>EXUpdatesURL</key>
     <string>https://u.expo.dev/680f4feb-6315-4a50-93ec-36dcd0b831d2</string>
   </dict>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "drive-mobile",
-  "version": "v1.7.1",
+  "version": "v1.7.2",
   "private": true,
   "license": "GNU",
   "scripts": {

src/components/modals/RunOutOfStorageModal/index.tsx

@@ -1,16 +1,17 @@
-import React from 'react';
 import prettysize from 'prettysize';
-import { View, TouchableWithoutFeedback, TouchableHighlight } from 'react-native';
+import { TouchableHighlight, TouchableWithoutFeedback, View } from 'react-native';
 import Modal from 'react-native-modalbox';
 
+import AppText from 'src/components/AppText';
+import { useTailwind } from 'tailwind-rn';
 import RunOutImage from '../../../../assets/images/modals/runout.svg';
 import strings from '../../../../assets/lang/strings';
-import { INFINITE_PLAN } from '../../../types';
-import { uiActions } from '../../../store/slices/ui';
-import { useAppDispatch, useAppSelector } from '../../../store/hooks';
-import { useTailwind } from 'tailwind-rn';
+import { openUrl } from '../../../helpers/utils';
 import useGetColor from '../../../hooks/useColor';
-import AppText from 'src/components/AppText';
+import { PRICING_URL } from '../../../services/drive/constants';
+import { useAppDispatch, useAppSelector } from '../../../store/hooks';
+import { uiActions } from '../../../store/slices/ui';
+import { INFINITE_PLAN } from '../../../types';
 
 function RunOutOfStorageModal(): JSX.Element {
   const tailwind = useTailwind();
@@ -34,9 +35,10 @@ function RunOutOfStorageModal(): JSX.Element {
   const getUsageString = () => {
     return prettysize(totalUsage);
   };
+
   const onUpgradeNowButtonPressed = () => {
     dispatch(uiActions.setShowRunOutSpaceModal(false));
-    dispatch(uiActions.setIsPlansModalOpen(true));
+    openUrl(PRICING_URL);
   };
 
   return (

src/helpers/utils.ts

@@ -0,0 +1,16 @@
+import { Linking } from 'react-native';
+import { logger } from '../services/common';
+
+export const openUrl = async (url: string) => {
+  try {
+    const supported = await Linking.canOpenURL(url);
+
+    if (supported) {
+      await Linking.openURL(url);
+    } else {
+      logger.error(`Cannot open URL: ${url}, not supported`);
+    }
+  } catch (error) {
+    logger.error(`An error occurred trying to open the URL: ${url}`, error);
+  }
+};

src/screens/AccountScreen/index.tsx

@@ -1,26 +1,27 @@
+import { imageService, PROFILE_PICTURE_CACHE_KEY } from '@internxt-mobile/services/common';
+import errorService from '@internxt-mobile/services/ErrorService';
+import { fs } from '@internxt-mobile/services/FileSystemService';
 import { CaretRight, CheckCircle, Warning } from 'phosphor-react-native';
+import { useEffect, useMemo, useState } from 'react';
 import { Alert, ScrollView, TouchableWithoutFeedback, View } from 'react-native';
+import storageService from 'src/services/StorageService';
+import { paymentsSelectors } from 'src/store/slices/payments';
 import { useTailwind } from 'tailwind-rn';
+import { useCountdown } from 'usehooks-ts';
 import strings from '../../../assets/lang/strings';
 import AppButton from '../../components/AppButton';
 import AppScreen from '../../components/AppScreen';
 import AppScreenTitle from '../../components/AppScreenTitle';
 import AppText from '../../components/AppText';
 import SettingsGroup from '../../components/SettingsGroup';
 import UserProfilePicture from '../../components/UserProfilePicture';
+import { openUrl } from '../../helpers/utils';
 import useGetColor from '../../hooks/useColor';
+import { PRICING_URL } from '../../services/drive/constants';
 import { useAppDispatch, useAppSelector } from '../../store/hooks';
 import { authSelectors, authThunks } from '../../store/slices/auth';
 import { uiActions } from '../../store/slices/ui';
 import { SettingsScreenProps } from '../../types/navigation';
-import { useCountdown } from 'usehooks-ts';
-import { useEffect, useMemo, useState } from 'react';
-import storageService from 'src/services/StorageService';
-import { paymentsSelectors } from 'src/store/slices/payments';
-import { constants } from 'src/services/AppService';
-import { imageService, PROFILE_PICTURE_CACHE_KEY } from '@internxt-mobile/services/common';
-import { fs } from '@internxt-mobile/services/FileSystemService';
-import errorService from '@internxt-mobile/services/ErrorService';
 
 function AccountScreen({ navigation }: SettingsScreenProps<'Account'>): JSX.Element {
   const showBilling = useAppSelector(paymentsSelectors.shouldShowBilling);
@@ -82,8 +83,9 @@ function AccountScreen({ navigation }: SettingsScreenProps<'Account'>): JSX.Elem
     }
   };
   const onBillingPressed = () => {
-    dispatch(uiActions.setIsPlansModalOpen(true));
+    openUrl(PRICING_URL);
   };
+
   const onManageSubscriptionPressed = () => {
     navigation.navigate('Plan');
   };

src/screens/StorageScreen/index.tsx

@@ -1,23 +1,24 @@
-import React, { useState } from 'react';
-import { View, ScrollView } from 'react-native';
+import { useState } from 'react';
+import { ScrollView, View } from 'react-native';
 import GestureRecognizer from 'react-native-swipe-gestures';
 
+import AppButton from 'src/components/AppButton';
+import SettingsGroup from 'src/components/SettingsGroup';
+import storageService from 'src/services/StorageService';
+import { paymentsSelectors } from 'src/store/slices/payments';
+import { storageSelectors } from 'src/store/slices/storage';
+import { useTailwind } from 'tailwind-rn';
 import strings from '../../../assets/lang/strings';
 import AppProgressBar from '../../components/AppProgressBar';
-import AppScreenTitle from '../../components/AppScreenTitle';
-import { useAppDispatch, useAppSelector } from '../../store/hooks';
-import { INFINITE_PLAN } from '../../types';
 import AppScreen from '../../components/AppScreen';
-import { SettingsScreenProps } from '../../types/navigation';
-import { useTailwind } from 'tailwind-rn';
+import AppScreenTitle from '../../components/AppScreenTitle';
 import AppText from '../../components/AppText';
+import { openUrl } from '../../helpers/utils';
 import useGetColor from '../../hooks/useColor';
-import { uiActions } from 'src/store/slices/ui';
-import SettingsGroup from 'src/components/SettingsGroup';
-import storageService from 'src/services/StorageService';
-import { storageSelectors } from 'src/store/slices/storage';
-import AppButton from 'src/components/AppButton';
-import { paymentsSelectors } from 'src/store/slices/payments';
+import { PRICING_URL } from '../../services/drive/constants';
+import { useAppSelector } from '../../store/hooks';
+import { INFINITE_PLAN } from '../../types';
+import { SettingsScreenProps } from '../../types/navigation';
 
 function StorageScreen({ navigation }: SettingsScreenProps<'Storage'>): JSX.Element {
   const [currentStatusStep, setCurrentStatusStep] = useState(0);
@@ -30,7 +31,7 @@ function StorageScreen({ navigation }: SettingsScreenProps<'Storage'>): JSX.Elem
   const usagePercent = useAppSelector(storageSelectors.usagePercent);
   const tailwind = useTailwind();
   const getColor = useGetColor();
-  const dispatch = useAppDispatch();
+
   const getLimitString = () => {
     if (limit === 0) {
       return '...';
@@ -43,9 +44,11 @@ function StorageScreen({ navigation }: SettingsScreenProps<'Storage'>): JSX.Elem
     return storageService.toString(limit);
   };
   const onBackButtonPressed = () => navigation.goBack();
+
   const onUpgradePressed = () => {
-    dispatch(uiActions.setIsPlansModalOpen(true));
+    openUrl(PRICING_URL);
   };
+
   const statusSteps = [
     () => (
       <>

src/services/drive/constants.ts

@@ -5,6 +5,7 @@ export const DRIVE_THUMBNAILS_DIRECTORY = `${DRIVE_ROOT_DIRECTORY}/thumbnails`;
 export const DRIVE_CACHE_DIRECTORY = `${DRIVE_ROOT_DIRECTORY}/cache`;
 export const MAX_CACHE_DIRECTORY_SIZE_IN_BYTES = 1024 * 1024 * 500;
 
+export const PRICING_URL = 'https://internxt.com/pricing';
 // 10% of the directory size
 export const MAX_FILE_SIZE_FOR_CACHING = MAX_CACHE_DIRECTORY_SIZE_IN_BYTES * 0.1;