diff --git a/src/components/App/styles.css b/src/components/App/styles.css index fc24bf9..ec522b1 100644 --- a/src/components/App/styles.css +++ b/src/components/App/styles.css @@ -5,6 +5,7 @@ height: 100%; margin: 0 auto; max-width: 560px; + justify-content: space-between; } .content { @@ -12,6 +13,7 @@ flex-direction: column; position: relative; width: 100%; + margin-bottom: auto; } .page { diff --git a/src/components/EmailEnterPage/index.tsx b/src/components/EmailEnterPage/index.tsx index c62a156..1169b81 100644 --- a/src/components/EmailEnterPage/index.tsx +++ b/src/components/EmailEnterPage/index.tsx @@ -42,9 +42,15 @@ function EmailEnterPage(): JSX.Element { .then(({ auth: { token, user } }) => signUp(token, user)) .then((token) => { const payload = { user: { profile_attributes: { birthday } }, token } - return api.updateUser(payload) + return Promise.all([ + api.updateUser(payload), + api.getSubscriptionItems({ locale, token }) + ]) + }) + .then(([{ user }, { item_prices }]) => { + dispatch(actions.user.update(user)) + dispatch(actions.subscriptionPlan.setAll(item_prices)) }) - .then(({ user }) => dispatch(actions.user.update(user))) .then(() => navigate(routes.client.subscription())) .catch((error: Error) => setError(error)) .finally(() => setIsLoading(false)) diff --git a/src/components/NotFoundPage/index.tsx b/src/components/NotFoundPage/index.tsx index f7b5629..1b78b35 100644 --- a/src/components/NotFoundPage/index.tsx +++ b/src/components/NotFoundPage/index.tsx @@ -1,4 +1,5 @@ import { useTranslation } from 'react-i18next' +import './styles.css' function NotFoundPage() { const { t } = useTranslation() diff --git a/src/components/NotFoundPage/styles.css b/src/components/NotFoundPage/styles.css index 9fe9c93..9164e9a 100644 --- a/src/components/NotFoundPage/styles.css +++ b/src/components/NotFoundPage/styles.css @@ -3,4 +3,5 @@ flex-direction: column; align-items: center; justify-content: center; + line-height: 1.5; } \ No newline at end of file diff --git a/src/components/PaymentPage/index.tsx b/src/components/PaymentPage/index.tsx index 61ad87f..ab90386 100644 --- a/src/components/PaymentPage/index.tsx +++ b/src/components/PaymentPage/index.tsx @@ -28,12 +28,11 @@ function PaymentPage(): JSX.Element { const locale = i18n.language const navigate = useNavigate() const email = useSelector(selectors.selectEmail) + const itemPriceId = 'aura-membership-2-week-USD' const handleClick = () => navigate(routes.client.wallpaper()) const loadData = useCallback(() => { - return api.getSubscriptionItems({ locale, token }) - .then(({ item_prices }) => item_prices.find(({ id }) => id === 'aura-membership-2-week-USD')) - .then((item) => api.getSubscriptionCheckout({ locale, token, itemPriceId: item?.id || '' })) - }, [api, locale, token]) + return api.getSubscriptionCheckout({ locale, token, itemPriceId }) + }, [api, itemPriceId, locale, token]) const { data, isPending } = useApiCall(loadData) console.log(data, isPending) return ( diff --git a/src/components/SubscriptionPage/index.tsx b/src/components/SubscriptionPage/index.tsx index d74d1c0..96ae510 100644 --- a/src/components/SubscriptionPage/index.tsx +++ b/src/components/SubscriptionPage/index.tsx @@ -14,6 +14,8 @@ function SubscriptionPage(): JSX.Element { const { t } = useTranslation() const navigate = useNavigate() const email = useSelector(selectors.selectEmail) + const itemPriceId = 'aura-membership-2-week-USD' + const itemPrice = useSelector(selectors.selectPlanById(itemPriceId)) const currency = Currency.USD const locale = Locale.EN const paymentItems = [ @@ -24,6 +26,7 @@ function SubscriptionPage(): JSX.Element { }, ] const handleClick = () => navigate(routes.client.paymentMethod()) + console.log({ itemPrice }) return ( <> diff --git a/src/store/index.ts b/src/store/index.ts index 27ab515..139b3a9 100644 --- a/src/store/index.ts +++ b/src/store/index.ts @@ -2,17 +2,24 @@ import { combineReducers, configureStore, createAction } from '@reduxjs/toolkit' import token, { actions as tokenActions, selectToken } from './token' import user, { actions as userActions, selectUser } from './user' import form, { actions as formActions, selectors as formSelectors } from './form' +import subscriptionPlans, { actions as subscriptionPlasActions, selectPlanById } from './subscriptionPlan' import { loadStore, backupStore } from './storageHelper' const preloadedState = loadStore() -export const reducer = combineReducers({ token, user, form }) +export const reducer = combineReducers({ token, user, form, subscriptionPlans }) export const actions = { token: tokenActions, user: userActions, form: formActions, + subscriptionPlan: subscriptionPlasActions, reset: createAction('reset'), } -export const selectors = { selectToken, selectUser, ...formSelectors } +export const selectors = { + selectToken, + selectUser, + selectPlanById, + ...formSelectors, +} export type RootState = ReturnType export const store = configureStore({ reducer, diff --git a/src/store/subscriptionPlan.ts b/src/store/subscriptionPlan.ts new file mode 100644 index 0000000..3ea8566 --- /dev/null +++ b/src/store/subscriptionPlan.ts @@ -0,0 +1,28 @@ +import { createSlice, createEntityAdapter, createSelector, EntityState } from '@reduxjs/toolkit' +import { SubscriptionItems } from '../api' + +type SubscriptionPlan = SubscriptionItems.ItemPrice + +const subscriptionPlanAdapter = createEntityAdapter({ + selectId: (plan) => plan.id, + sortComparer: (a, b) => a.created_at - b.created_at, +}) + +const initialState = subscriptionPlanAdapter.getInitialState() + +const subscriptionPlanSlice = createSlice({ + name: 'subscriptionPlans', + initialState, + reducers: { + setAll: subscriptionPlanAdapter.setAll, + }, + extraReducers: (builder) => builder.addCase('reset', () => initialState) +}) + +export const { actions } = subscriptionPlanSlice +const { selectById } = subscriptionPlanAdapter.getSelectors() +export const selectPlanById = (id: string) => createSelector( + (state: { subscriptionPlans: EntityState }) => state.subscriptionPlans, + (state) => selectById(state, id) +) +export default subscriptionPlanSlice.reducer