Intercept PricingModal call, redirect before opening it · devhubapp/devhub@f193e75 · GitHub
Skip to content

Commit f193e75

Browse files
brunolemosbrunolemos
committed
Intercept PricingModal call, redirect before opening it
1 parent bc21a9b commit f193e75

7 files changed

Lines changed: 90 additions & 24 deletions

File tree

‎packages/components/src/components/context/DeepLinkContext.tsx‎

Lines changed: 1 addition & 0 deletions

‎packages/components/src/components/modals/PricingModal.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ export interface PricingModalProps {
3131
showBackButton: boolean
3232
}
3333

34-
const allowChangePlansOnThisApp = false
34+
export const allowChangePlansOnThisApp = false
3535

3636
export function PricingModal(props: PricingModalProps) {
3737
const {

‎packages/components/src/hooks/use-cards-props.tsx‎

Lines changed: 38 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import {
1111
} from '@devhub/core'
1212
import React, { useCallback, useMemo, useRef } from 'react'
1313
import { Dimensions, View } from 'react-native'
14+
import { useDispatch } from 'react-redux'
1415

1516
import {
1617
getCardPropsForItem,
@@ -33,13 +34,15 @@ import {
3334
import { EmptyCards } from '../components/cards/EmptyCards'
3435
import { columnHeaderHeight } from '../components/columns/ColumnHeader'
3536
import { ColumnLoadingIndicator } from '../components/columns/ColumnLoadingIndicator'
37+
import { Button } from '../components/common/Button'
3638
import { ButtonLink } from '../components/common/ButtonLink'
3739
import { QuickFeedbackRow } from '../components/common/QuickFeedbackRow'
3840
import { RefreshControl } from '../components/common/RefreshControl'
3941
import { useAppLayout } from '../components/context/LayoutContext'
4042
import { usePlans } from '../components/context/PlansContext'
4143
import { OneListProps } from '../libs/one-list'
4244
import { useSafeArea } from '../libs/safe-area-view'
45+
import * as actions from '../redux/actions'
4346
import * as selectors from '../redux/selectors'
4447
import { sharedStyles } from '../styles/shared'
4548
import { useColumn } from './use-column'
@@ -78,6 +81,7 @@ export function useCardsProps<ItemT extends EnhancedItem>({
7881

7982
const { paidPlans } = usePlans()
8083

84+
const dispatch = useDispatch()
8185
const appToken = useReduxState(selectors.appTokenSelector)
8286
const plan = useReduxState(selectors.currentUserPlanSelector)
8387
const isPlanExpired = useReduxState(selectors.isPlanExpiredSelector)
@@ -376,20 +380,26 @@ export function useCardsProps<ItemT extends EnhancedItem>({
376380
emoji="lock"
377381
errorButtonView={
378382
<View>
379-
<ButtonLink
383+
<Button
380384
analyticsCategory="plan_expired"
381385
analyticsLabel="select_a_plan_button"
382-
href={`${constants.DEVHUB_LINKS.PRICING_PAGE}?appToken=${
383-
appToken || ''
384-
}`}
385-
openOnNewTab
386+
onPress={() => {
387+
dispatch(
388+
actions.pushModal({
389+
name: 'PRICING',
390+
params: {
391+
highlightFeature: 'columnsLimit',
392+
},
393+
}),
394+
)
395+
}}
386396
>
387397
{paidPlans.some((p) => p && p.interval)
388398
? plan && plan.amount
389399
? 'Switch plan ↗'
390400
: 'Select a plan ↗'
391401
: 'See available options ↗'}
392-
</ButtonLink>
402+
</Button>
393403
</View>
394404
}
395405
errorMessage="You need a paid plan to keep using DevHub."
@@ -435,15 +445,21 @@ export function useCardsProps<ItemT extends EnhancedItem>({
435445
columnId={column.id}
436446
emoji="rocket"
437447
errorButtonView={
438-
<ButtonLink
448+
<Button
439449
analyticsLabel="unlock_more_columns_button"
440-
href={`${constants.DEVHUB_LINKS.PRICING_PAGE}?appToken=${
441-
appToken || ''
442-
}`}
443-
openOnNewTab
450+
onPress={() => {
451+
dispatch(
452+
actions.pushModal({
453+
name: 'PRICING',
454+
params: {
455+
highlightFeature: 'columnsLimit',
456+
},
457+
}),
458+
)
459+
}}
444460
>
445461
Unlock more columns ↗
446-
</ButtonLink>
462+
</Button>
447463
}
448464
errorMessage={`You have exceeded the limit of ${
449465
plan.featureFlags.columnsLimit
@@ -502,20 +518,24 @@ export function useCardsProps<ItemT extends EnhancedItem>({
502518
columnId={column.id}
503519
emoji="lock"
504520
errorButtonView={
505-
<ButtonLink
521+
<Button
506522
analyticsLabel="select_a_plan_button"
507523
analyticsCategory="invalid_plan"
508-
href={`${constants.DEVHUB_LINKS.PRICING_PAGE}?appToken=${
509-
appToken || ''
510-
}`}
511-
openOnNewTab
524+
onPress={() => {
525+
dispatch(
526+
actions.pushModal({
527+
name: 'PRICING',
528+
params: {},
529+
}),
530+
)
531+
}}
512532
>
513533
{paidPlans.some((p) => p && p.interval)
514534
? plan && plan.amount
515535
? 'Switch plan ↗'
516536
: 'Select a plan ↗'
517537
: 'See available options ↗'}
518-
</ButtonLink>
538+
</Button>
519539
}
520540
errorMessage="You need a paid plan to keep using DevHub."
521541
errorTitle="Upgrade to a paid plan"

‎packages/components/src/redux/middlewares/devhub.ts‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import qs from 'qs'
2+
3+
import { constants } from '@devhub/core'
4+
5+
import * as selectors from '../selectors'
6+
import { allowChangePlansOnThisApp } from '../../components/modals/PricingModal'
7+
import { Browser } from '../../libs/browser'
8+
import { Middleware } from '../types'
9+
10+
export const devhubMiddleware: Middleware = (store) => {
11+
return (next) => (action) => {
12+
switch (action?.type) {
13+
case 'PUSH_MODAL': {
14+
switch (action.payload.name) {
15+
case 'PRICING': {
16+
if (!allowChangePlansOnThisApp) {
17+
const state = store.getState()
18+
const appToken = selectors.appTokenSelector(state)
19+
Browser.openURLOnNewTab(
20+
`${constants.DEVHUB_LINKS.PRICING_PAGE}?${qs.stringify({
21+
appToken,
22+
plan: action.payload.params?.initialSelectedPlanId,
23+
feature: action.payload.params?.highlightFeature,
24+
})}`,
25+
)
26+
return
27+
}
28+
}
29+
30+
default: {
31+
break
32+
}
33+
}
34+
}
35+
36+
default: {
37+
next(action)
38+
break
39+
}
40+
}
41+
}
42+
}

‎packages/components/src/redux/middlewares/flipper/index.native.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
1-
import flipperMiddleware from 'redux-flipper'
1+
import createFlipperMiddleware from 'redux-flipper'
22

3-
export { flipperMiddleware }
3+
export { createFlipperMiddleware }

‎packages/components/src/redux/middlewares/flipper/index.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { Middleware } from '../../types'
22

3-
export function flipperMiddleware(): Middleware {
3+
export function createFlipperMiddleware(): Middleware {
44
return (_store) => (next) => (action) => {
55
next(action)
66
}

‎packages/components/src/redux/store.ts‎

Lines changed: 5 additions & 2 deletions

0 commit comments

Comments
 (0)