@@ -5,6 +5,7 @@ import { useDispatch, useSelector } from 'react-redux'
55import { PERSONAL_PLAN_ID } from '../models/plans'
66import { LicensingTitle } from './LicensingTitle'
77import { Timestamp } from './Timestamp'
8+ import { BillingUI } from './BillingUI'
89import { Notice } from './Notice'
910import { Link } from './Link'
1011import { Icon } from './Icon'
@@ -29,11 +30,13 @@ export const LicensingNoticeDisplay: React.FC<Props> = ({ noticeType, license, s
2930
3031 const UpgradeButton = (
3132 < >
32- < Link to = "/account/plans" >
33- < Button color = "primary" variant = "contained" size = "small" >
34- Upgrade
35- </ Button >
36- </ Link >
33+ < BillingUI >
34+ < Link to = "/account/plans" >
35+ < Button color = "primary" variant = "contained" size = "small" >
36+ Upgrade
37+ </ Button >
38+ </ Link >
39+ </ BillingUI >
3740 < Tooltip title = "Close" >
3841 < IconButton onClick = { onClose } >
3942 < Icon name = "times" size = "md" color = "primary" />
@@ -49,7 +52,10 @@ export const LicensingNoticeDisplay: React.FC<Props> = ({ noticeType, license, s
4952 < Notice severity = "warning" button = { UpgradeButton } >
5053 { title } has expired.
5154 < em >
52- Please upgrade your license. < Link to = "/account/plans" > Learn more.</ Link >
55+ Please upgrade your license.{ ' ' }
56+ < BillingUI >
57+ < Link to = "/account/plans" > Learn more.</ Link >
58+ </ BillingUI >
5359 </ em >
5460 </ Notice >
5561 )
@@ -59,7 +65,10 @@ export const LicensingNoticeDisplay: React.FC<Props> = ({ noticeType, license, s
5965 < Notice severity = "error" >
6066 { title } is past due.
6167 < em >
62- Please update your payment method. < Link to = "/account/plans" > Learn more.</ Link >
68+ Please update your payment method.{ ' ' }
69+ < BillingUI >
70+ < Link to = "/account/plans" > Learn more.</ Link >
71+ </ BillingUI >
6372 </ em >
6473 </ Notice >
6574 )
@@ -70,7 +79,11 @@ export const LicensingNoticeDisplay: React.FC<Props> = ({ noticeType, license, s
7079 < Notice severity = "warning" >
7180 { title } is incomplete.
7281 < em >
73- Please < Link to = "/account/plans" > update your payment information </ Link > to continue service.
82+ Please{ ' ' }
83+ < BillingUI >
84+ < Link to = "/account/plans" > update your payment information </ Link >
85+ </ BillingUI > { ' ' }
86+ to continue service.
7487 </ em >
7588 </ Notice >
7689 )
@@ -80,7 +93,10 @@ export const LicensingNoticeDisplay: React.FC<Props> = ({ noticeType, license, s
8093 < Notice severity = "warning" button = { UpgradeButton } >
8194 { title } has been canceled.
8295 < em >
83- Please please check. < Link to = "/account/plans" > Learn more.</ Link >
96+ Please check.{ ' ' }
97+ < BillingUI >
98+ < Link to = "/account/plans" > Learn more.</ Link >
99+ </ BillingUI >
84100 </ em >
85101 </ Notice >
86102 )
@@ -91,7 +107,9 @@ export const LicensingNoticeDisplay: React.FC<Props> = ({ noticeType, license, s
91107 { title } < LicensingTitle count = { serviceLimit ?. value } />
92108 < em >
93109 You have exceeded your limit by { serviceLimit ?. actual - serviceLimit ?. value } .{ ' ' }
94- < Link to = "/account/plans" > Learn more.</ Link >
110+ < BillingUI >
111+ < Link to = "/account/plans" > Learn more.</ Link >
112+ </ BillingUI >
95113 </ em >
96114 </ Notice >
97115 )
0 commit comments