[BA-1890] Add CTAs to renewal flow (#2476)

* Add CTAs to renewal flow

* ks

Author: arjun-dureja

apps/web/src/components/Basenames/ManageNames/NameDisplay.tsx

@@ -19,6 +19,10 @@ import {
   useRemoveNameFromUI,
 } from 'apps/web/src/components/Basenames/ManageNames/hooks';
 import Link from 'apps/web/src/components/Link';
+import { isBasenameRenewalsKilled } from 'apps/web/src/utils/usernames';
+import { useRouter } from 'next/navigation';
+import { ActionType } from 'libs/base-ui/utils/logEvent';
+import { useAnalytics } from 'apps/web/contexts/Analytics';
 
 const transitionClasses = 'transition-all duration-700 ease-in-out';
 
@@ -50,6 +54,8 @@ export default function NameDisplay({
   expiresAt,
   refetchNames,
 }: NameDisplayProps) {
+  const router = useRouter();
+  const { logEventWithContext } = useAnalytics();
   const expirationText = formatDistanceToNow(parseISO(expiresAt), { addSuffix: true });
   const name = domain.split('.')[0];
 
@@ -66,6 +72,17 @@ export default function NameDisplay({
   const openRenewalModal = useCallback(() => setIsRenewalModalOpen(true), []);
   const closeRenewalModal = useCallback(() => setIsRenewalModalOpen(false), []);
 
+  const handleExtendRegistration = useCallback(() => {
+    logEventWithContext('extend_registration_button_clicked', ActionType.click, {
+      context: 'manage_names',
+    });
+    if (isBasenameRenewalsKilled) {
+      openRenewalModal();
+    } else {
+      router.push(`/name/${domain}/renew`);
+    }
+  }, [logEventWithContext, openRenewalModal, domain, router]);
+
   return (
     <li key={tokenId} className={pillNameClasses}>
       <div className="flex items-center justify-between">
@@ -107,7 +124,7 @@ export default function NameDisplay({
                   </span>
                 </DropdownItem>
               ) : null}
-              <DropdownItem onClick={openRenewalModal}>
+              <DropdownItem onClick={handleExtendRegistration}>
                 <span className="flex flex-row items-center gap-2">
                   <Icon name="convert" color="currentColor" width="1rem" height="1rem" /> Extend
                   registration

apps/web/src/components/Basenames/UsernameProfileSidebar/index.tsx

@@ -6,7 +6,11 @@ import { useUsernameProfile } from 'apps/web/src/components/Basenames/UsernamePr
 import UsernameProfileKeywords from 'apps/web/src/components/Basenames/UsernameProfileKeywords';
 import { Button, ButtonVariants } from 'apps/web/src/components/Button/Button';
 import useReadBaseEnsTextRecords from 'apps/web/src/hooks/useReadBaseEnsTextRecords';
-import { buildBasenameReclaimContract, UsernameTextRecordKeys } from 'apps/web/src/utils/usernames';
+import {
+  buildBasenameReclaimContract,
+  isBasenameRenewalsKilled,
+  UsernameTextRecordKeys,
+} from 'apps/web/src/utils/usernames';
 import { ActionType } from 'libs/base-ui/utils/logEvent';
 import { useCallback, useEffect, useMemo } from 'react';
 import { useAccount } from 'wagmi';
@@ -15,6 +19,7 @@ import useWriteContractWithReceipt, {
   WriteTransactionWithReceiptStatus,
 } from 'apps/web/src/hooks/useWriteContractWithReceipt';
 import { useErrors } from 'apps/web/contexts/Errors';
+import { useRouter } from 'next/navigation';
 
 export default function UsernameProfileSidebar() {
   const {
@@ -31,6 +36,7 @@ export default function UsernameProfileSidebar() {
   const { basenameChain } = useBasenameChain(profileUsername);
   const { logError } = useErrors();
   const { logEventWithContext } = useAnalytics();
+  const router = useRouter();
 
   const toggleSettings = useCallback(() => {
     if (!currentWalletIsProfileEditor) return;
@@ -43,6 +49,13 @@ export default function UsernameProfileSidebar() {
     showProfileSettings,
   ]);
 
+  const handleExtendRegistration = useCallback(() => {
+    logEventWithContext('extend_registration_button_clicked', ActionType.click, {
+      context: 'profile_sidebar',
+    });
+    router.push(`/name/${profileUsername}/renew`);
+  }, [logEventWithContext, profileUsername, router]);
+
   const { existingTextRecords } = useReadBaseEnsTextRecords({
     username: profileUsername,
   });
@@ -90,9 +103,21 @@ export default function UsernameProfileSidebar() {
         address={profileAddress}
       />
       {currentWalletIsProfileEditor && (
-        <Button variant={ButtonVariants.Gray} rounded fullWidth onClick={toggleSettings}>
-          {showProfileSettings ? 'Back to Profile' : 'Manage Profile'}
-        </Button>
+        <div className="flex flex-col gap-2">
+          <Button variant={ButtonVariants.Gray} rounded fullWidth onClick={toggleSettings}>
+            {showProfileSettings ? 'Back to Profile' : 'Manage Profile'}
+          </Button>
+          {!isBasenameRenewalsKilled && (
+            <Button
+              variant={ButtonVariants.Gray}
+              rounded
+              fullWidth
+              onClick={handleExtendRegistration}
+            >
+              Extend Registration
+            </Button>
+          )}
+        </div>
       )}
       {currentWalletNeedsToReclaimProfile && (
         <Button