Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
wants to merge 5 commits into
base: master
Choose a base branch
from
Open

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

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
b4969ab
feat: get the checkout sessionId and redirect to Stripe
xabg2 Feb 12, 2025
9f8ed67
Removed console log
CandelR Feb 12, 2025
a6eb66f
fix: mark sessionId param as optional
xabg2 Feb 12, 2025
e80d80d
Removed use effect
CandelR Feb 12, 2025
3b4b2a5
feat: handle Stripe sessionId in an isolated component
xabg2 Feb 12, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 27 additions & 9 deletions src/app/payment/views/IntegratedCheckoutView/CheckoutViewWrapper.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,14 @@
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 { useParams } from 'react-router-dom';
import { useSignUp } from '../../../auth/components/SignUp/useSignUp';
import envService from '../../../core/services/env.service';
import errorService from '../../../core/services/error.service';
Expand All @@ -15,6 +19,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';
Expand All @@ -26,12 +31,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: {
Expand Down Expand Up @@ -116,6 +115,7 @@ const CheckoutViewWrapper = () => {
const dispatch = useAppDispatch();
const { translate } = useTranslationContext();
const { checkoutTheme } = useThemeContext();
const { sessionId } = useParams<{ sessionId: string }>();
const [state, dispatchReducer] = useReducer(checkoutReducer, initialStateForCheckout);
const isAuthenticated = useAppSelector((state) => state.user.isAuthenticated);
const user = useSelector<RootState, UserSettings | undefined>((state) => state.user.user);
Expand Down Expand Up @@ -194,6 +194,24 @@ const CheckoutViewWrapper = () => {
amount: plan?.upsellPlan?.decimalAmount,
};

const checkSessionId = (sessionId: string): boolean => {
const pattern = /^cs_(test|live)_[a-zA-Z0-9]+$/;
return pattern.test(sessionId);
};

useEffect(() => {
if (sessionId) {
const isValid = checkSessionId(sessionId);

if (isValid) {
paymentService.redirectToCheckout({ sessionId }).catch((err) => {
errorService.reportError(err);
navigationService.push(AppView.CheckoutCancel);
});
}
}
}, [sessionId]);

useEffect(() => {
const params = new URLSearchParams(window.location.search);
const planId = params.get('planId');
Expand Down
2 changes: 1 addition & 1 deletion src/app/routes/paths.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -132,7 +132,7 @@
{
"id": "checkout",
"layout": "empty",
"path": "/checkout",
"path": "/checkout/:sessionId",
"exact": false,
"auth": false
},
Expand Down
Loading