[_]: feature/Restore stripe checkout for mobile app

src/app/core/config/views.ts

@@ -31,6 +31,7 @@ import ChangeEmailView from '../views/ChangeEmailView';
 import NotFoundView from '../views/NotFoundView/NotFoundView';
 import VerifyEmailView from '../views/VerifyEmailView';
 import CheckoutViewWrapper from '../../payment/views/IntegratedCheckoutView/CheckoutViewWrapper';
+import { CheckoutSessionId } from 'app/payment/views/CheckoutSession/CheckoutSessionId';
 
 const views: Array<{
   id: string;
@@ -57,6 +58,7 @@ const views: Array<{
   { id: AppView.Deactivation, component: DeactivationView },
   { id: AppView.CheckoutSuccess, component: CheckoutSuccessView },
   { id: AppView.CheckoutCancel, component: CheckoutCancelView },
+  { id: AppView.CheckoutSession, component: CheckoutSessionId },
   { id: AppView.Checkout, component: CheckoutViewWrapper },
   { id: AppView.RecoveryLink, component: RecoveryLinkView },
   { id: AppView.ShareFileToken, component: ShareFileView },

src/app/core/types.ts

@@ -127,6 +127,7 @@ export enum AppView {
   CheckoutSuccess = 'checkout-success',
   CheckoutCancel = 'checkout-cancel',
   Checkout = 'checkout',
+  CheckoutSession = 'checkout-session',
   RecoveryLink = 'recovery-link',
   ShareFileToken = 'share-token',
   ShareFileToken2 = 'share-token-2',

src/app/payment/views/CheckoutSession/CheckoutSessionId.tsx

@@ -0,0 +1,31 @@
+import errorService from 'app/core/services/error.service';
+import navigationService from 'app/core/services/navigation.service';
+import { AppView } from 'app/core/types';
+import paymentService from 'app/payment/services/payment.service';
+import { useEffect } from 'react';
+import { useParams } from 'react-router-dom';
+
+export const CheckoutSessionId = () => {
+  const { sessionId } = useParams<{ sessionId: string }>();
+
+  const checkSessionId = (id: string): boolean => {
+    const pattern = /^cs_(test|live)_[a-zA-Z0-9]+$/;
+    return pattern.test(id);
+  };
+
+  useEffect(() => {
+    if (sessionId) {
+      const isValid = checkSessionId(sessionId);
+
+      if (isValid) {
+        paymentService.redirectToCheckout({ sessionId }).catch((err) => {
+          errorService.reportError(err);
+          navigationService.push(AppView.CheckoutCancel);
+        });
+        return;
+      }
+    }
+  }, [sessionId]);
+
+  return <></>;
+};

src/app/payment/views/IntegratedCheckoutView/CheckoutViewWrapper.tsx

@@ -1,9 +1,12 @@
-import { BaseSyntheticEvent, useCallback, useEffect, useReducer, useRef } from 'react';
+import { UserSettings } from '@internxt/sdk/dist/shared/types/userSettings';
 import { Elements } from '@stripe/react-stripe-js';
-import { useSelector } from 'react-redux';
 import { Stripe, StripeElements, StripeElementsOptionsMode } from '@stripe/stripe-js';
-import { UserSettings } from '@internxt/sdk/dist/shared/types/userSettings';
+import { BaseSyntheticEvent, useCallback, useEffect, useReducer, useRef } from 'react';
+import { useSelector } from 'react-redux';
 
+import { Loader } from '@internxt/ui';
+import { bytesToString } from 'app/drive/services/size.service';
+import { getProductAmount } from 'app/payment/utils/getProductAmount';
 import { useCheckout } from 'hooks/checkout/useCheckout';
 import { useSignUp } from '../../../auth/components/SignUp/useSignUp';
 import envService from '../../../core/services/env.service';
@@ -15,6 +18,7 @@ import { AppView, IFormValues } from '../../../core/types';
 import databaseService from '../../../database/services/database.service';
 import { getDatabaseProfileAvatar } from '../../../drive/services/database.service';
 import { useTranslationContext } from '../../../i18n/provider/TranslationProvider';
+import ChangePlanDialog from '../../../newSettings/Sections/Account/Plans/components/ChangePlanDialog';
 import notificationsService, { ToastType } from '../../../notifications/services/notifications.service';
 import checkoutService from '../../../payment/services/checkout.service';
 import paymentService from '../../../payment/services/payment.service';
@@ -26,12 +30,6 @@ import authCheckoutService from '../../services/auth-checkout.service';
 import { checkoutReducer, initialStateForCheckout } from '../../store/checkoutReducer';
 import { AuthMethodTypes, CouponCodeData, RequestedPlanData } from '../../types';
 import CheckoutView from './CheckoutView';
-import ChangePlanDialog from '../../../newSettings/Sections/Account/Plans/components/ChangePlanDialog';
-import { getProductAmount } from 'app/payment/utils/getProductAmount';
-import { bytesToString } from 'app/drive/services/size.service';
-import { Loader } from '@internxt/ui';
-import gaService, { GA_SEND_TO_KEY } from 'app/analytics/ga.service';
-import { getCookie } from 'app/analytics/utils';
 
 export const THEME_STYLES = {
   dark: {

src/app/routes/paths.json

@@ -136,6 +136,13 @@
       "exact": false,
       "auth": false
     },
+    {
+      "id": "checkout-session",
+      "layout": "empty",
+      "path": "/checkout/:sessionId",
+      "exact": false,
+      "auth": false
+    },
     {
       "id": "checkout-status",
       "layout": "empty",