feat: subscription plan is added to the store

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 {

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))

src/components/NotFoundPage/index.tsx

@@ -1,4 +1,5 @@
 import { useTranslation } from 'react-i18next'
+import './styles.css'
 
 function NotFoundPage() {
   const { t } = useTranslation()

src/components/NotFoundPage/styles.css

@@ -3,4 +3,5 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
+  line-height: 1.5;
 }

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<SubscriptionCheckout.Response>(loadData)
   console.log(data, isPending)
   return (

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 (
     <>
       <UserHeader email={email} />

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<typeof reducer>
 export const store = configureStore({
   reducer,

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<SubscriptionPlan>({
+  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<SubscriptionPlan> }) => state.subscriptionPlans,
+  (state) => selectById(state, id)
+)
+export default subscriptionPlanSlice.reducer