diff --git a/src/api/resources/UserSubscriptionReceipts.ts b/src/api/resources/UserSubscriptionReceipts.ts
index 9e9208b..74647cd 100644
--- a/src/api/resources/UserSubscriptionReceipts.ts
+++ b/src/api/resources/UserSubscriptionReceipts.ts
@@ -21,29 +21,31 @@ export interface AppleReceiptPayload extends AuthPayload {
export type Payload = ChargebeeReceiptPayload | AppleReceiptPayload
export interface Response {
- subscription_receipt: {
- id: string
- user_id: number
- status: number
- expires_at: null | string
- requested_at: string
- created_at: string
- data: {
- input: {
- subscription_items: [
- {
- item_price_id: string
- }
- ],
- payment_intent: {
- gw_token: string
- gateway_account_id: string
+ subscription_receipt: SubscriptionReceipt
+}
+
+export interface SubscriptionReceipt {
+ id: string
+ user_id: number
+ status: number
+ expires_at: null | string
+ requested_at: string
+ created_at: string
+ data: {
+ input: {
+ subscription_items: [
+ {
+ item_price_id: string
}
- },
- app_bundle_id: string
- autorenewable: boolean
- error: string
- }
+ ],
+ payment_intent: {
+ gw_token: string
+ gateway_account_id: string
+ }
+ },
+ app_bundle_id: string
+ autorenewable: boolean
+ error: string
}
}
diff --git a/src/components/App/index.tsx b/src/components/App/index.tsx
index 3b61e02..7860ad1 100644
--- a/src/components/App/index.tsx
+++ b/src/components/App/index.tsx
@@ -1,6 +1,9 @@
import { useState } from 'react'
import { Routes, Route, Navigate, Outlet, useLocation } from 'react-router-dom'
import { useAuth } from '../../auth'
+import { useSelector } from 'react-redux'
+import { selectors } from '../../store'
+import routes, { hasNavigation } from '../../routes'
import BirthdayPage from '../BirthdayPage'
import BirthtimePage from '../BirthtimePage'
import CreateProfilePage from '../CreateProfilePage'
@@ -13,7 +16,6 @@ import NotFoundPage from '../NotFoundPage'
import Header from '../Header'
import Navbar from '../Navbar'
import Footer from '../Footer'
-import routes, { hasNavigation } from '../../routes'
import './styles.css'
function App(): JSX.Element {
@@ -62,9 +64,14 @@ function SkipStep(): JSX.Element {
}
function MainPage(): JSX.Element {
- const { user } = useAuth()
- const page = user ? routes.client.wallpaper() : routes.client.birthday()
- return
+ const status = useSelector(selectors.selectStatus)
+ const pageMapper = {
+ 'lead': routes.client.birthday(),
+ 'registred': routes.client.subscription(),
+ 'subscribed': routes.client.wallpaper(),
+ 'unsubscribed': routes.client.subscription(),
+ }
+ return
}
export default App
diff --git a/src/components/EmailEnterPage/index.tsx b/src/components/EmailEnterPage/index.tsx
index 7d07266..9366659 100644
--- a/src/components/EmailEnterPage/index.tsx
+++ b/src/components/EmailEnterPage/index.tsx
@@ -49,6 +49,7 @@ function EmailEnterPage(): JSX.Element {
})
.then(([{ user }, { item_prices }]) => {
dispatch(actions.user.update(user))
+ dispatch(actions.status.update('registred'))
dispatch(actions.subscriptionPlan.setAll(item_prices))
})
.then(() => navigate(routes.client.subscription()))
diff --git a/src/components/PaymentPage/index.tsx b/src/components/PaymentPage/index.tsx
index 51c518e..a8c3fa8 100644
--- a/src/components/PaymentPage/index.tsx
+++ b/src/components/PaymentPage/index.tsx
@@ -1,8 +1,10 @@
-import { useState } from 'react'
+import { useCallback, useState } from 'react'
import { useTranslation } from 'react-i18next'
-import { useSelector } from 'react-redux'
+import { useDispatch, useSelector } from 'react-redux'
+import { useNavigate } from 'react-router-dom'
import { selectors } from '../../store'
import { usePayment } from '../../payment'
+import { actions } from '../../store'
import {
ApplePayBanner,
ApplePayButton,
@@ -15,15 +17,23 @@ import UserHeader from '../UserHeader'
import Title from '../Title'
import Loader from '../Loader'
import secure from './secure.png'
+import routes from '../../routes'
import './styles.css'
function PaymentPage(): JSX.Element {
const { t } = useTranslation()
const { applePay } = usePayment()
const [open, setOpen] = useState(false)
+ const dispatch = useDispatch()
+ const navigate = useNavigate()
const isLoading = applePay === null
const isApplePayAvailable = import.meta.env.PROD && applePay?.canMakePayments()
const email = useSelector(selectors.selectEmail)
+ const onSuccess = useCallback(() => {
+ dispatch(actions.status.update('subscribed'))
+ navigate(routes.client.wallpaper())
+ }, [dispatch, navigate])
+ const onError = useCallback((error: Error) => console.error(error), [])
return (
<>
@@ -36,13 +46,17 @@ function PaymentPage(): JSX.Element {
{t('choose_payment')}
- { isApplePayAvailable ? : }
+ { isApplePayAvailable
+ ?
+
+ :
+ }
{t('or').toUpperCase()}
setOpen(true)} />
{t('will_be_charged', { strongText: {t('trial_price')} })}
- setOpen(false)} />
+ setOpen(false)} onSuccess={onSuccess} onError={onError} />
>
)}
diff --git a/src/components/PaymentPage/methods/ApplePay/Button.tsx b/src/components/PaymentPage/methods/ApplePay/Button.tsx
index c2e9e60..8dc562a 100644
--- a/src/components/PaymentPage/methods/ApplePay/Button.tsx
+++ b/src/components/PaymentPage/methods/ApplePay/Button.tsx
@@ -1,20 +1,22 @@
import { useCallback, useEffect, useId } from 'react'
import { useTranslation } from 'react-i18next'
-import { useNavigate } from 'react-router-dom'
import { PaymentIntent } from '@chargebee/chargebee-js-types'
-import { useApi, useApiCall, extractErrorMessage } from '../../../../api'
+import { useApi, useApiCall, extractErrorMessage, SubscriptionReceipts } from '../../../../api'
import { usePayment, ApplePayButtonOptions } from '../../../../payment'
import { useAuth } from '../../../../auth'
import Loader from '../../../Loader'
import ErrorText from '../../../ErrorText'
-import routes from '../../../../routes'
const currencyCode = 'USD'
const paymentMethod = 'apple_pay'
-export function ApplePayButton(): JSX.Element {
+interface ApplePayButtonProps {
+ onSuccess: (receipt: SubscriptionReceipts.SubscriptionReceipt) => void
+ onError: (error: Error) => void
+}
+
+export function ApplePayButton({ onSuccess, onError }: ApplePayButtonProps): JSX.Element {
const api = useApi()
- const navigate = useNavigate()
const buttonId = useId()
const { i18n } = useTranslation()
const { token } = useAuth()
@@ -38,14 +40,13 @@ export function ApplePayButton(): JSX.Element {
applePay?.mountPaymentButton(`#${buttonId}`, buttonOptions)
.then(() => applePay?.handlePayment())
.then((paymentIntent) => {
- console.log('Success payment by ApplePay', paymentIntent)
return api.createSubscriptionReceipt({
token, receiptData: paymentIntent.id, autorenewable: true, sandbox: true,
})
})
- .then(() => navigate(routes.client.wallpaper()))
- .catch(console.error)
- }, [data, applePay, buttonId, navigate, i18n.language, api, token])
+ .then(({ subscription_receipt }: SubscriptionReceipts.Response) => onSuccess(subscription_receipt))
+ .catch((error: Error) => onError(error))
+ }, [data, applePay, buttonId, i18n.language, api, token, onSuccess, onError])
return isPending ? : (