feat(paidtier): Chat UI gets AWS Account ID from user

Author: justinmk3

chat-client/src/client/mynahUi.ts

@@ -57,7 +57,15 @@ import {
 } from './utils'
 import { ChatHistory, ChatHistoryList } from './features/history'
 import { pairProgrammingModeOff, pairProgrammingModeOn, programmerModeCard } from './texts/pairProgramming'
-import { paidTierSuccessCard, freeTierLimitReachedCard, upgradeQButton } from './texts/paidTier'
+import {
+    paidTierInfoCard,
+    paidTierUpgradeForm,
+    freeTierLimitSticky,
+    continueUpgradeQButton,
+    upgradeSuccessSticky,
+    upgradePendingSticky,
+    plansAndPricingTitle,
+} from './texts/paidTier'
 
 export interface InboundChatApi {
     addChatResponse(params: ChatResult, tabId: string, isPartialResult: boolean): void
@@ -87,6 +95,31 @@ const getTabPairProgrammingMode = (mynahUi: MynahUI, tabId: string) => {
     return promptInputOptions.find(item => item.id === 'pair-programmer-mode')?.value === 'true'
 }
 
+/** When user provides AWS account by clicking "Continue" or hitting Enter key. */
+function onLinkAwsAccountId(
+    tabId: string,
+    messageId: string,
+    messager: Messager,
+    action: { id: string; text?: string; formData?: Record<string, string> }
+) {
+    const awsAccountId = action.formData?.['awsAccountId']
+    if (!awsAccountId) {
+        return false
+        // throw new Error(`onInBodyButtonClicked: ${continueUpgradeQButton.id} button did not provide awsAccountId`)
+    }
+    // HACK: emit "followUp" to send form data "outbound".
+    const payload: FollowUpClickParams = {
+        tabId,
+        messageId,
+        followUp: {
+            pillText: awsAccountId,
+            type: 'awsAccountId',
+        },
+    }
+    messager.onFollowUpClicked(payload)
+    return true
+}
+
 export const handlePromptInputChange = (mynahUi: MynahUI, tabId: string, optionsValues: Record<string, string>) => {
     const promptTypeValue = optionsValues['pair-programmer-mode']
 
@@ -374,7 +407,9 @@ export const createMynahUi = (
             messager.onInfoLinkClick(payload)
         },
         onInBodyButtonClicked: (tabId, messageId, action, eventId) => {
-            if (action.id === disclaimerAcknowledgeButtonId) {
+            if (action.id === continueUpgradeQButton.id) {
+                onLinkAwsAccountId(tabId, messageId, messager, { id: action.id, formData: action.formItemValues })
+            } else if (action.id === disclaimerAcknowledgeButtonId) {
                 // Hide the legal disclaimer card
                 disclaimerCardActive = false
 
@@ -448,11 +483,20 @@ export const createMynahUi = (
                 messager.onCreatePrompt(action.formItemValues![ContextPrompt.PromptNameFieldId])
             }
         },
-        onFormTextualItemKeyPress: (event: KeyboardEvent, formData: Record<string, string>, itemId: string) => {
+        onFormTextualItemKeyPress: (
+            event: KeyboardEvent,
+            formData: Record<string, string>,
+            itemId: string,
+            tabId: string,
+            eventId?: string
+        ) => {
             if (itemId === ContextPrompt.PromptNameFieldId && event.key === 'Enter') {
                 event.preventDefault()
                 messager.onCreatePrompt(formData[ContextPrompt.PromptNameFieldId])
                 return true
+            } else if (itemId === 'awsAccountId' && event.key === 'Enter') {
+                event.preventDefault()
+                return onLinkAwsAccountId(tabId, '', messager, { id: continueUpgradeQButton.id, formData: formData })
             }
             return false
         },
@@ -839,34 +883,102 @@ export const createMynahUi = (
      * Shows a message if the user reaches free-tier limit.
      * Shows a message if the user just upgraded to paid-tier.
      */
-    const onPaidTierModeChange = (
-        tabId: string,
-        mode: 'paidtier' | 'paidtier-success' | 'freetier' | 'freetier-limit'
-    ) => {
-        if (!['paidtier', 'paidtier-success', 'freetier', 'freetier-limit'].includes(mode)) {
-            return // invalid mode
+    const onPaidTierModeChange = (tabId: string, mode: string | undefined) => {
+        if (
+            !mode ||
+            ![
+                'freetier',
+                'freetier-limit',
+                'freetier-upgrade-info',
+                'upgrade-start',
+                'upgrade-pending',
+                'paidtier',
+            ].includes(mode)
+        ) {
+            return false // invalid mode
         }
 
-        tabId = tabId !== '' ? tabId : getOrCreateTabId()!
+        tabId = !!tabId ? tabId : getOrCreateTabId()!
+
+        // Detect if the tab is already showing the "Upgrade Q" UI.
+        const isFreeTierLimitUi =
+            mynahUi.getTabData(tabId)?.getStore()?.promptInputStickyCard?.messageId === freeTierLimitSticky.messageId
+        const isUpgradePendingUi =
+            mynahUi.getTabData(tabId)?.getStore()?.promptInputStickyCard?.messageId === upgradePendingSticky.messageId
+        const isPlansAndPricingTab = plansAndPricingTitle === mynahUi.getTabData(tabId).getStore()?.tabTitle
+
+        if (mode === 'freetier-limit') {
+            mynahUi.updateStore(tabId, {
+                promptInputStickyCard: freeTierLimitSticky,
+            })
 
-        // Detect if the tab is already showing the "Upgrade Q" calls-to-action.
-        const didShowLimitReached = mynahUi.getTabData(tabId)?.getStore()?.promptInputButtons?.[0] === upgradeQButton
-        if (mode === 'freetier-limit' && !didShowLimitReached) {
-            mynahUi.addChatItem(tabId, freeTierLimitReachedCard)
-        } else if (mode === 'paidtier-success') {
-            mynahUi.addChatItem(tabId, paidTierSuccessCard)
+            if (!isFreeTierLimitUi) {
+                // Avoid duplicate "limit reached" cards.
+                // REMOVED: don't want the "card", just use the "banner" only.
+                // mynahUi.addChatItem(tabId, freeTierLimitCard)
+            }
+        } else if (mode === 'freetier-upgrade-info') {
+            mynahUi.addChatItem(tabId, paidTierInfoCard)
+        } else if (mode === 'upgrade-start') {
+            // Show the "Upgrade" form in its own tab.
+            const newTabId = createTabId() ?? tabId
+            mynahUi.updateStore(newTabId, {
+                tabTitle: plansAndPricingTitle,
+                chatItems: [], // Clear the tab.
+                promptInputDisabledState: true, // This special tab is not a "chat" tab.
+                promptInputButtons: [],
+                promptInputOptions: [],
+                promptInputPlaceholder: '',
+                promptInputVisible: false,
+            })
+            mynahUi.addChatItem(newTabId, paidTierUpgradeForm)
+            // openTab('upgrade-start', { tabId: 'upgrade-start' })
+        } else if (mode === 'upgrade-pending') {
+            // Change the sticky banner to show a progress spinner.
+            const card: typeof freeTierLimitSticky = {
+                ...(isFreeTierLimitUi ? freeTierLimitSticky : upgradePendingSticky),
+                icon: 'progress',
+            }
+            mynahUi.updateStore(tabId, {
+                // Show a progress ribbon.
+                promptInputVisible: true,
+                promptInputProgress: {
+                    status: 'default',
+                    text: 'Waiting for subscription status...',
+                    value: -1, // infinite
+                    // valueText: 'Waiting 2...',
+                },
+                promptInputStickyCard: isFreeTierLimitUi ? card : null,
+            })
+        } else if (mode === 'paidtier') {
+            mynahUi.updateStore(tabId, {
+                promptInputStickyCard: null,
+                promptInputProgress: null,
+                promptInputVisible: !isPlansAndPricingTab,
+            })
+            if (isFreeTierLimitUi || isUpgradePendingUi || isPlansAndPricingTab) {
+                // Transitioning from 'upgrade-pending' to upgrade success.
+                const card: typeof upgradeSuccessSticky = {
+                    ...upgradeSuccessSticky,
+                    canBeDismissed: !isPlansAndPricingTab,
+                }
+                mynahUi.updateStore(tabId, {
+                    promptInputStickyCard: card,
+                })
+            }
         }
 
         mynahUi.updateStore(tabId, {
-            promptInputButtons: mode === 'freetier-limit' ? [upgradeQButton] : [],
-            promptInputDisabledState: mode === 'freetier-limit',
+            // promptInputButtons: mode === 'freetier-limit' ? [upgradeQButton] : [],
+            // promptInputDisabledState: mode === 'freetier-limit',
         })
+
+        return true
     }
 
     const updateChat = (params: ChatUpdateParams) => {
         // HACK: Special field sent by `agenticChatController.ts:setPaidTierMode()`.
-        if ((params as any).paidTierMode) {
-            onPaidTierModeChange(params.tabId, (params as any).paidTierMode as any)
+        if (onPaidTierModeChange(params.tabId, (params as any).paidTierMode as string)) {
             return
         }
 

chat-client/src/client/texts/paidTier.ts

@@ -1,6 +1,33 @@
 import { ChatItem, ChatItemButton, ChatItemFormItem, ChatItemType, TextBasedFormItem } from '@aws/mynah-ui'
 
-export const freeTierLimitReachedCard: ChatItem = {
+export const plansAndPricingTitle = 'Plans & Pricing'
+
+export const upgradeQButton: ChatItemButton = {
+    flash: 'once',
+    fillState: 'hover',
+    position: 'inside',
+    id: 'paidtier-upgrade-q',
+    // https://github.com/aws/mynah-ui/blob/main/src/components/icon/icons/q.svg
+    // https://github.com/aws/mynah-ui/blob/main/src/components/icon/icons/rocket.svg
+    // icon: MynahIcons.Q,
+    description: 'Upgrade to Amazon Q Pro',
+    text: 'Upgrade Q',
+    status: 'info',
+    disabled: false,
+}
+
+export const continueUpgradeQButton: ChatItemButton = {
+    id: 'paidtier-upgrade-q-continue',
+    icon: 'rocket',
+    flash: 'once',
+    fillState: 'hover',
+    position: 'inside',
+    // description: 'Link an AWS account to upgrade Amazon Q',
+    text: 'Continue',
+    disabled: false,
+}
+
+export const freeTierLimitCard: ChatItem = {
     type: ChatItemType.ANSWER,
     title: 'FREE TIER LIMIT REACHED',
     header: {
@@ -14,6 +41,62 @@ export const freeTierLimitReachedCard: ChatItem = {
     body: 'You have reached the free tier limit. Upgrade to Amazon Q Pro.\n\n[Learn More...](https://aws.amazon.com/q/pricing/)',
 }
 
+/** "Banner" (sticky card) shown above the chat prompt. */
+export const freeTierLimitSticky: Partial<ChatItem> = {
+    messageId: 'freetier-limit-banner',
+    title: 'FREE TIER LIMIT REACHED',
+    body: "You've reached your invocation limit for this month. Upgrade to Amazon Q Pro. [Learn More...](https://aws.amazon.com/q/pricing/)",
+    buttons: [upgradeQButton],
+    canBeDismissed: false,
+}
+
+export const upgradePendingSticky: Partial<ChatItem> = {
+    messageId: 'upgrade-pending-banner',
+    body: 'Waiting for subscription status...',
+    status: 'info',
+    buttons: [],
+    canBeDismissed: true,
+}
+
+export const upgradeSuccessSticky: Partial<ChatItem> = {
+    messageId: 'upgrade-success-banner',
+    // body: 'Successfully upgraded to Amazon Q Pro.',
+    status: 'success',
+    buttons: [],
+    // icon: 'q',
+    // iconStatus: 'success',
+    header: {
+        icon: 'ok-circled',
+        iconStatus: 'success',
+        body: 'Successfully upgraded to Amazon Q Pro.',
+        // status: {
+        //     status: 'success',
+        //     position: 'right',
+        //     text: 'Successfully upgraded to Amazon Q Pro.',
+        // },
+    },
+    canBeDismissed: true,
+}
+
+export const paidTierInfoCard: ChatItem = {
+    type: ChatItemType.ANSWER,
+    title: 'UPGRADE TO AMAZON Q PRO',
+    buttons: [upgradeQButton],
+    header: {
+        icon: 'q',
+        iconStatus: 'primary',
+        body: 'This feature requires a subscription to Amazon Q Pro.',
+        status: {
+            status: 'info',
+            icon: 'q',
+        },
+    },
+    body: 'Upgrade to Amazon Q Pro. [Learn More...](https://aws.amazon.com/q/pricing/)',
+    messageId: 'paidtier-info',
+    fullWidth: true,
+    canBeDismissed: true,
+}
+
 export const paidTierSuccessCard: ChatItem = {
     type: ChatItemType.ANSWER,
     title: 'UPGRADED TO AMAZON Q PRO',
@@ -52,15 +135,31 @@ export const paidTierStep1: ChatItem = {
     body: 'You have upgraded to Amazon Q Pro',
 }
 
-export const upgradeQButton: ChatItemButton = {
-    flash: 'once',
-    fillState: 'hover',
-    position: 'outside',
-    id: 'upgrade-q',
-    // https://github.com/aws/mynah-ui/blob/main/src/components/icon/icons/q.svg
-    // https://github.com/aws/mynah-ui/blob/main/src/components/icon/icons/rocket.svg
-    // icon: MynahIcons.Q,
-    description: 'Upgrade to Amazon Q Pro',
-    text: 'Upgrade Q',
+/** "Upgrade Q" form with a "AWS account id" user-input textbox. */
+export const paidTierUpgradeForm: ChatItem = {
+    type: ChatItemType.ANSWER,
     status: 'info',
+    fullWidth: true,
+    // title: 'Connect AWS account and upgrade',
+    body: `
+# Connect AWS account and upgrade
+
+Provide your AWS account number to enable your Pro subscription. Upon confirming the subscription, your AWS account will begin to be charged.
+
+[Learn More...](https://aws.amazon.com/q/)
+`,
+    formItems: [
+        {
+            id: 'awsAccountId',
+            type: 'textinput',
+            title: 'AWS account ID',
+            description: '12-digit AWS account ID',
+            // tooltip: 'Link an AWS account to upgrade to Amazon Q Pro',
+            validationPatterns: {
+                patterns: [{ pattern: '[0-9]{12}', errorMessage: 'Must be a valid 12-digit AWS account ID' }],
+            },
+        },
+    ],
+    buttons: [continueUpgradeQButton],
+    snapToTop: true,
 }