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 6ec33f7ba784..07c065e0b450 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 @@ -14,7 +14,8 @@ import constants from '../../account-sidebar/UsefulLinks/constants'; const kycIndiaFeature = 'identity-documents'; const kycFraudFeature = 'procedures:fraud'; -const kycFeatures = [kycIndiaFeature, kycFraudFeature] +const newAccount = 'new-account'; +const accountFeatures = [kycIndiaFeature, kycFraudFeature, newAccount]; export default function AccountSidebar() { const [menu, setMenu] = useState(undefined); @@ -38,6 +39,7 @@ export default function AccountSidebar() { } const isEUOrCA = ['EU', 'CA'].includes(region); + const isNewAccountAvailable = !!availability['new-account']; menu.push({ id: 'back-to-home', @@ -48,7 +50,7 @@ export default function AccountSidebar() { menu.push({ id: 'my-account', label: t('sidebar_account'), - href: navigation.getURL('dedicated', '/useraccount/dashboard'), + href: navigation.getURL(isNewAccountAvailable ? 'new-account' : 'dedicated', '/useraccount/dashboard'), routeMatcher: new RegExp('^/useraccount'), }); @@ -58,7 +60,7 @@ export default function AccountSidebar() { menu.push({ id: 'my-identity-documents', label: t('sidebar_account_identity_documents'), - href: navigation.getURL('dedicated', '/identity-documents'), + href: navigation.getURL(isNewAccountAvailable ? 'new-account' : 'dedicated', '/identity-documents'), routeMatcher: new RegExp('^/identity-documents'), }); } @@ -70,7 +72,7 @@ export default function AccountSidebar() { menu.push({ id: 'kyc-documents', label: t('sidebar_account_kyc_documents'), - href: navigation.getURL('dedicated', '/documents'), + href: navigation.getURL(isNewAccountAvailable ? 'new-account' : 'dedicated', '/documents'), routeMatcher: new RegExp('^/documents'), }); } @@ -119,7 +121,7 @@ export default function AccountSidebar() { menu.push({ id: 'my-contacts', label: t('sidebar_account_contacts'), - href: navigation.getURL('dedicated', '/contacts'), + href: navigation.getURL(isNewAccountAvailable ? 'new-account' : 'dedicated', '/contacts'), routeMatcher: new RegExp('^/contacts'), }); } @@ -152,7 +154,7 @@ export default function AccountSidebar() { return menu; }; - const {data: availability} = useFeatureAvailability(features.concat(kycFeatures)); + const {data: availability} = useFeatureAvailability(features.concat(accountFeatures)); const buildMenu = async () => Promise.resolve({ 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 91871223031a..2eb0df85679b 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 @@ -35,7 +35,7 @@ const UserAccountMenu = ({ const [isKycDocumentsVisible, setIsDocumentsVisible] = useState( false, ); - + const [isNewAccountAvailable, setIsNewAccountAvailable] = useState(false); const user = shell .getPlugin('environment') .getEnvironment() @@ -70,12 +70,12 @@ const UserAccountMenu = ({ const getUrl = (key: string, hash: string) => shell.getPlugin('navigation').getURL(key, hash); const ssoLink = getUrl('iam', '#/dashboard/users'); - const supportLink = getUrl('dedicated', '#/useraccount/support/level'); + let [supportLink, setSupportLink] = useState(getUrl('dedicated', '#/useraccount/support/level')); const getAllLinks = useMemo( () => async () => { let isIdentityDocumentsAvailable = false; - const featureAvailability = await fetchFeatureAvailabilityData(['identity-documents', 'procedures:fraud']); + const featureAvailability = await fetchFeatureAvailabilityData(['new-account', 'identity-documents', 'procedures:fraud']); if (featureAvailability['identity-documents']) { const { status } = await reketInstance.get(`/me/procedure/identity`); isIdentityDocumentsAvailable = ['required', 'open'].includes(status); @@ -85,11 +85,23 @@ const UserAccountMenu = ({ setIsDocumentsVisible(['required', 'open'].includes(status)); } + setIsNewAccountAvailable(!!featureAvailability['new-account']) + + if (isNewAccountAvailable) { + setSupportLink(getUrl('new-account', '#/useraccount/support/level')); + } + setAllLinks([ - ...links, + ...links.map((link: UserLink) => { + if (['user-account-menu-profile', 'myCommunications', 'myContacts'].includes(link.key)) { + link.app = isNewAccountAvailable ? 'new-account' : 'dedicated'; + } + return link; + }), ...(isIdentityDocumentsAvailable ? [ { + app: isNewAccountAvailable ? 'new-account' : 'dedicated', key: 'myIdentityDocuments', hash: '#/identity-documents', i18nKey: 'user_account_menu_my_identity_documents', @@ -99,6 +111,7 @@ const UserAccountMenu = ({ ...(region === 'US' ? [ { + app: isNewAccountAvailable ? 'new-account' : 'dedicated', key: 'myAssistanceTickets', hash: '#/ticket', i18nKey: 'user_account_menu_my_assistance_tickets', @@ -186,7 +199,7 @@ const UserAccountMenu = ({
{allLinks.map((link: UserLink) => { - const { key, hash, i18nKey } = link; + const { app, key, hash, i18nKey } = link; return ( {t(i18nKey)} @@ -208,6 +221,7 @@ const UserAccountMenu = ({ id={'account_kyc_documents'} onClick={() => onLinkClick( { + app: isNewAccountAvailable ? 'new-account': 'dedicated', key: 'account_kyc_documents', hash: '#/documents', i18nKey: 'sidebar_account_kyc_documents' @@ -216,7 +230,7 @@ const UserAccountMenu = ({ className="d-block" aria-label={sidebarTranslation.t('sidebar_account_kyc_documents')} title={sidebarTranslation.t('sidebar_account_kyc_documents')} - href={getUrl('dedicated', '#/documents')} + href={getUrl(isNewAccountAvailable ? 'new-account': 'dedicated', '#/documents')} target="_top" > {sidebarTranslation.t('sidebar_account_kyc_documents')} diff --git a/packages/manager/apps/container/src/container/nav-reshuffle/header/user-account-menu/UserLink.ts b/packages/manager/apps/container/src/container/nav-reshuffle/header/user-account-menu/UserLink.ts index 174095c75534..742ef238264f 100644 --- a/packages/manager/apps/container/src/container/nav-reshuffle/header/user-account-menu/UserLink.ts +++ b/packages/manager/apps/container/src/container/nav-reshuffle/header/user-account-menu/UserLink.ts @@ -1,4 +1,5 @@ export type UserLink = { + app: string; key: string; hash: string; i18nKey: string; diff --git a/packages/manager/apps/container/src/container/nav-reshuffle/header/user-account-menu/constants.ts b/packages/manager/apps/container/src/container/nav-reshuffle/header/user-account-menu/constants.ts index 28bcf7a8f345..a6c5697c5ab3 100644 --- a/packages/manager/apps/container/src/container/nav-reshuffle/header/user-account-menu/constants.ts +++ b/packages/manager/apps/container/src/container/nav-reshuffle/header/user-account-menu/constants.ts @@ -17,30 +17,35 @@ export const tracking = { export const links: UserLink[] = [ { + app: 'dedicated', key: 'user-account-menu-profile', hash: '#/useraccount/dashboard', i18nKey: 'user_account_menu_profile', trackingHit: tracking.goToProfile, }, { + app: 'dedicated', key: 'myInvoices', hash: '#/billing/history', i18nKey: 'user_account_menu_my_invoices', trackingHit: tracking.billingBills, }, { + app: 'dedicated', key: 'myServices', hash: '#/billing/autorenew', i18nKey: 'user_account_menu_my_services', trackingHit: tracking.myServices }, { + app: 'dedicated', key: 'myCommunications', hash: '#/useraccount/emails', i18nKey: 'user_account_menu_my_communication', trackingHit: tracking.accountContacts, }, { + app: 'dedicated', key: 'myPaymentMethods', hash: '#/billing/payment/method', i18nKey: 'user_account_menu_my_payment_methods', @@ -48,12 +53,14 @@ export const links: UserLink[] = [ }, { + app: 'dedicated', key: 'myCommands', hash: '#/billing/orders', i18nKey: 'user_account_menu_my_commands', trackingHit: tracking.orders, }, { + app: 'dedicated', key: 'myContacts', hash: '#/contacts/services', i18nKey: 'user_account_menu_my_contacts',