diff --git a/packages/manager/apps/container/src/container/legacy/server-sidebar/universe/AccountSidebar.tsx b/packages/manager/apps/container/src/container/legacy/server-sidebar/universe/AccountSidebar.tsx index 07c065e0b450..a9286dbeda96 100644 --- a/packages/manager/apps/container/src/container/legacy/server-sidebar/universe/AccountSidebar.tsx +++ b/packages/manager/apps/container/src/container/legacy/server-sidebar/universe/AccountSidebar.tsx @@ -15,7 +15,8 @@ import constants from '../../account-sidebar/UsefulLinks/constants'; const kycIndiaFeature = 'identity-documents'; const kycFraudFeature = 'procedures:fraud'; const newAccount = 'new-account'; -const accountFeatures = [kycIndiaFeature, kycFraudFeature, newAccount]; +const newBilling = 'new-billing'; +const accountFeatures = [kycIndiaFeature, kycFraudFeature, newAccount, newBilling]; export default function AccountSidebar() { const [menu, setMenu] = useState(undefined); @@ -40,6 +41,7 @@ export default function AccountSidebar() { const isEUOrCA = ['EU', 'CA'].includes(region); const isNewAccountAvailable = !!availability['new-account']; + const isNewBillingAvailable = !!availability['new-billing']; menu.push({ id: 'back-to-home', @@ -83,7 +85,7 @@ export default function AccountSidebar() { id: 'my-bills', label: t('sidebar_billing'), href: navigation.getURL( - 'dedicated', + isNewBillingAvailable ? 'new-billing' : 'dedicated', region === 'US' ? '/billing/payAsYouGo' : '/billing/history', ), routeMatcher: new RegExp( @@ -96,7 +98,7 @@ export default function AccountSidebar() { id: 'my-services', label: t('sidebar_billing_services'), href: navigation.getURL( - 'dedicated', + isNewBillingAvailable ? 'new-billing' : 'dedicated', `/billing/autorenew${isEnterprise ? '/ssh' : '/'}`, ), routeMatcher: new RegExp('^/billing/autorenew', 'i'), @@ -106,13 +108,13 @@ export default function AccountSidebar() { menu.push({ id: 'payment-method', label: t('sidebar_billing_payment'), - href: navigation.getURL('dedicated', '/billing/payment'), + href: navigation.getURL(isNewBillingAvailable ? 'new-billing' : 'dedicated', '/billing/payment'), routeMatcher: new RegExp('^/billing/payment[^s]'), }); menu.push({ id: 'my-orders', label: t('sidebar_orders'), - href: navigation.getURL('dedicated', '/billing/orders'), + href: navigation.getURL(isNewBillingAvailable ? 'new-billing' : 'dedicated', '/billing/orders'), routeMatcher: new RegExp('^/billing/orders'), }); } diff --git a/packages/manager/apps/container/src/container/nav-reshuffle/header/user-account-menu/Content.tsx b/packages/manager/apps/container/src/container/nav-reshuffle/header/user-account-menu/Content.tsx index 2eb0df85679b..8bd8148aa22a 100644 --- a/packages/manager/apps/container/src/container/nav-reshuffle/header/user-account-menu/Content.tsx +++ b/packages/manager/apps/container/src/container/nav-reshuffle/header/user-account-menu/Content.tsx @@ -36,6 +36,7 @@ const UserAccountMenu = ({ false, ); const [isNewAccountAvailable, setIsNewAccountAvailable] = useState(false); + const [isNewBillingAvailable, setIsNewBillingAvailable] = useState(false); const user = shell .getPlugin('environment') .getEnvironment() @@ -75,7 +76,7 @@ const UserAccountMenu = ({ const getAllLinks = useMemo( () => async () => { let isIdentityDocumentsAvailable = false; - const featureAvailability = await fetchFeatureAvailabilityData(['new-account', 'identity-documents', 'procedures:fraud']); + const featureAvailability = await fetchFeatureAvailabilityData(['new-billing', 'new-account', 'identity-documents', 'procedures:fraud']); if (featureAvailability['identity-documents']) { const { status } = await reketInstance.get(`/me/procedure/identity`); isIdentityDocumentsAvailable = ['required', 'open'].includes(status); @@ -86,6 +87,7 @@ const UserAccountMenu = ({ } setIsNewAccountAvailable(!!featureAvailability['new-account']) + setIsNewBillingAvailable(!!featureAvailability['new-billing']) if (isNewAccountAvailable) { setSupportLink(getUrl('new-account', '#/useraccount/support/level')); @@ -96,6 +98,9 @@ const UserAccountMenu = ({ if (['user-account-menu-profile', 'myCommunications', 'myContacts'].includes(link.key)) { link.app = isNewAccountAvailable ? 'new-account' : 'dedicated'; } + if (['myInvoices', 'myServices', 'myPaymentMethods', 'myCommands'].includes(link.key)) { + link.app = isNewBillingAvailable ? 'new-billing' : 'dedicated'; + } return link; }), ...(isIdentityDocumentsAvailable diff --git a/packages/manager/apps/container/src/core/routing/redirections.tsx b/packages/manager/apps/container/src/core/routing/redirections.tsx index 97d8d421be36..696431f1a1b9 100644 --- a/packages/manager/apps/container/src/core/routing/redirections.tsx +++ b/packages/manager/apps/container/src/core/routing/redirections.tsx @@ -14,6 +14,7 @@ function Rewrite({ to }: { to: string }): JSX.Element { export function Redirections(configuration: Record): JSX.Element { const isNewAccountAvailable = !!configuration?.['new-account']; + const isNewBillingAvailable = !!configuration?.['new-billing']; return ( <> @@ -46,10 +47,17 @@ export function Redirections(configuration: Record): JSX.El element={} /> )} - } - /> + {isNewBillingAvailable ? ( + } + /> + ) : ( + } + /> + )} } /> } />