fix(clerk-js): Improve removal page copyright for connected account a…

…nd web3 wallet
clerk · Jun 2, 2022 · bfdfbba · bfdfbba
1 parent cf06ae2
commit bfdfbba
Show file tree

Hide file tree

Showing 9 changed files with 27 additions and 18 deletions.
diff --git a/packages/clerk-js/src/ui/userProfile/EditableListFieldRemoveCard.tsx b/packages/clerk-js/src/ui/userProfile/EditableListFieldRemoveCard.tsx
@@ -6,8 +6,9 @@ import { handleError } from 'ui/common';
 import { Alert } from 'ui/common/alert';
 
 interface EditableListFieldRemoveCardProps {
-  type: 'phone' | 'email' | 'external_account' | 'web3_wallet';
+  type: 'phone' | 'email' | 'connected_account' | 'web3_wallet';
   label: string;
+  buttonLabel: string;
   onCancel: () => void;
   onRemove: () => Promise<any>;
   onRemoved?: () => void;
@@ -16,11 +17,11 @@ interface EditableListFieldRemoveCardProps {
 export const EditableListFieldRemoveCard: React.FC<EditableListFieldRemoveCardProps> = ({
   type,
   label,
+  buttonLabel,
   onCancel,
   onRemove,
   onRemoved,
 }) => {
-  const lowerLabel = label.toLowerCase();
   const [error, setError] = React.useState<string | undefined>();
 
   const updateFieldSubmit = async () => {
@@ -39,7 +40,6 @@ export const EditableListFieldRemoveCard: React.FC<EditableListFieldRemoveCardPr
   return (
     <TitledCard
       title={`Remove ${formattedType}`}
-      subtitle='Confirm removal'
       className='cl-themed-card cl-verifiable-field-card'
     >
       <Alert type='error'>{error}</Alert>
@@ -49,10 +49,10 @@ export const EditableListFieldRemoveCard: React.FC<EditableListFieldRemoveCardPr
           {type === 'phone' ? (
             <PhoneViewer
               className='cl-identifier'
-              phoneNumber={lowerLabel}
+              phoneNumber={label.toLowerCase()}
             />
           ) : (
-            <span className='cl-identifier'>{lowerLabel}</span>
+            <span className='cl-identifier'>{label}</span>
           )}{' '}
           will be removed from this account.
         </p>
@@ -68,11 +68,15 @@ export const EditableListFieldRemoveCard: React.FC<EditableListFieldRemoveCardPr
             yourself.
           </p>
         )}
-        {type === 'external_account' && <p>You will no longer be able to sign in using this connected account.</p>}
+        {type === 'connected_account' && (
+          <p>Unlink your {label} account, and remove associated personal information.</p>
+        )}
         {type === 'web3_wallet' && <p>Remove the connection between this app and your Web3 wallet</p>}
       </div>
       <div className='cl-form-button-group'>
-        <Button onClick={updateFieldSubmit}>Remove {formattedType}</Button>
+        <Button onClick={updateFieldSubmit}>
+          {buttonLabel} {formattedType}
+        </Button>
         <Button
           flavor='text'
           type='reset'

diff --git a/packages/clerk-js/src/ui/userProfile/__snapshots__/UserProfile.test.tsx.snap b/packages/clerk-js/src/ui/userProfile/__snapshots__/UserProfile.test.tsx.snap
@@ -3509,7 +3509,7 @@ Array [
         <svg
           data-filename="../shared/assets/icons/bin.svg"
         />
-        Remove
+        Unlink
       </button>
     </div>
     <div
@@ -3794,7 +3794,7 @@ Array [
         <svg
           data-filename="../shared/assets/icons/bin.svg"
         />
-        Disconnect
+        Unlink
       </button>
     </div>
     <div

diff --git a/packages/clerk-js/src/ui/userProfile/connectedAccounts/ConnectedAccountDetail.test.tsx b/packages/clerk-js/src/ui/userProfile/connectedAccounts/ConnectedAccountDetail.test.tsx
@@ -86,11 +86,11 @@ describe('<ConnectedAccountDetail/>', () => {
     expect(tree).toMatchSnapshot();
   });
 
-  it('Disconnect Google Connected Account', () => {
+  it('Unlink Google Connected Account', () => {
     render(<ConnectedAccountDetail />);
 
-    userEvent.click(screen.getByText('Disconnect'));
-    userEvent.click(screen.getByText('Remove external account', { selector: 'button' }));
+    userEvent.click(screen.getByText('Unlink'));
+    userEvent.click(screen.getByText('Unlink connected account', { selector: 'button' }));
     expect(mockGoogleDestroy).toHaveBeenCalled();
   });
 });
diff --git a/packages/clerk-js/src/ui/userProfile/connectedAccounts/ConnectedAccountDetail.tsx b/packages/clerk-js/src/ui/userProfile/connectedAccounts/ConnectedAccountDetail.tsx
@@ -4,6 +4,7 @@ import { Avatar } from '@clerk/shared/components/avatar';
 import { Button } from '@clerk/shared/components/button';
 import { List } from '@clerk/shared/components/list';
 import { TitledCard } from '@clerk/shared/components/titledCard';
+import { titleize } from '@clerk/shared/utils';
 import React from 'react';
 import { svgUrl } from 'ui/common/constants';
 import { useCoreUser } from 'ui/contexts';
@@ -76,8 +77,9 @@ export function ConnectedAccountDetail(): JSX.Element | null {
 
   const disconnectExternalAccountScreen = (
     <EditableListFieldRemoveCard
-      type='external_account'
-      label={externalAccount.providerTitle()}
+      type='connected_account'
+      label={titleize(externalAccount.providerSlug())}
+      buttonLabel='Unlink'
       onCancel={() => {
         setShowRemovalPage(false);
       }}
@@ -124,7 +126,7 @@ export function ConnectedAccountDetail(): JSX.Element | null {
             hoverable
           >
             <BinIcon />
-            Disconnect
+            Unlink
           </Button>
         </TitledCard>
       )}

diff --git a/...s/src/ui/userProfile/connectedAccounts/__snapshots__/ConnectedAccountDetail.test.tsx.snap b/...s/src/ui/userProfile/connectedAccounts/__snapshots__/ConnectedAccountDetail.test.tsx.snap
@@ -122,7 +122,7 @@ Array [
       <svg
         data-filename="../shared/assets/icons/bin.svg"
       />
-      Disconnect
+      Unlink
     </button>
   </div>,
 ]

diff --git a/packages/clerk-js/src/ui/userProfile/emailAdressess/EmailDetail.tsx b/packages/clerk-js/src/ui/userProfile/emailAdressess/EmailDetail.tsx
@@ -60,6 +60,7 @@ export function EmailDetail(): JSX.Element | null {
     <EditableListFieldRemoveCard
       type='email'
       label={email.emailAddress}
+      buttonLabel='Remove'
       onCancel={() => {
         setShowRemovalPage(false);
       }}

diff --git a/packages/clerk-js/src/ui/userProfile/phoneNumbers/PhoneDetail.tsx b/packages/clerk-js/src/ui/userProfile/phoneNumbers/PhoneDetail.tsx
@@ -109,6 +109,7 @@ export const PhoneDetail = (): JSX.Element => {
     <EditableListFieldRemoveCard
       type='phone'
       label={phoneIdent.phoneNumber}
+      buttonLabel='Remove'
       onCancel={() => {
         setShowRemovalPage(false);
       }}

diff --git a/packages/clerk-js/src/ui/userProfile/web3Wallets/Web3WalletDetail.tsx b/packages/clerk-js/src/ui/userProfile/web3Wallets/Web3WalletDetail.tsx
@@ -51,6 +51,7 @@ export function Web3WalletDetail(): JSX.Element | null {
     <EditableListFieldRemoveCard
       type='web3_wallet'
       label={web3Wallet.web3Wallet}
+      buttonLabel='Unlink'
       onCancel={() => {
         setShowRemovalPage(false);
       }}
@@ -132,7 +133,7 @@ export function Web3WalletDetail(): JSX.Element | null {
             hoverable
           >
             <BinIcon />
-            Remove
+            Unlink
           </Button>
         </TitledCard>
       )}

diff --git a/...ages/clerk-js/src/ui/userProfile/web3Wallets/__snapshots__/Web3WalletDetail.test.tsx.snap b/...ages/clerk-js/src/ui/userProfile/web3Wallets/__snapshots__/Web3WalletDetail.test.tsx.snap
@@ -138,7 +138,7 @@ Array [
       <svg
         data-filename="../shared/assets/icons/bin.svg"
       />
-      Remove
+      Unlink
     </button>
   </div>,
 ]