Hide "become a sustainer" button if you're already a sustainer

ts/components/BadgeDialog.stories.tsx

@@ -18,6 +18,7 @@ const i18n = setupI18n('en', enMessages);
 const story = storiesOf('Components/BadgeDialog', module);
 
 const defaultProps: ComponentProps<typeof BadgeDialog> = {
+  areWeASubscriber: false,
   badges: getFakeBadges(3),
   firstName: 'Alice',
   i18n,
@@ -95,3 +96,7 @@ story.add('Five badges', () => (
 story.add('Many badges', () => (
   <BadgeDialog {...defaultProps} badges={getFakeBadges(50)} />
 ));
+
+story.add('Many badges, user is a subscriber', () => (
+  <BadgeDialog {...defaultProps} areWeASubscriber badges={getFakeBadges(50)} />
+));

ts/components/BadgeDialog.tsx

@@ -16,6 +16,7 @@ import { BadgeCarouselIndex } from './BadgeCarouselIndex';
 import { BadgeSustainerInstructionsDialog } from './BadgeSustainerInstructionsDialog';
 
 type PropsType = Readonly<{
+  areWeASubscriber: boolean;
   badges: ReadonlyArray<BadgeType>;
   firstName?: string;
   i18n: LocalizerType;
@@ -53,6 +54,7 @@ export function BadgeDialog(props: PropsType): null | JSX.Element {
 }
 
 function BadgeDialogWithBadges({
+  areWeASubscriber,
   badges,
   firstName,
   i18n,
@@ -114,17 +116,19 @@ function BadgeDialogWithBadges({
               title={title}
             />
           </div>
-          <Button
-            className={classNames(
-              'BadgeDialog__instructions-button',
-              currentBadge.category !== BadgeCategory.Donor &&
-                'BadgeDialog__instructions-button--hidden'
-            )}
-            onClick={onShowInstructions}
-            size={ButtonSize.Large}
-          >
-            {i18n('BadgeDialog__become-a-sustainer-button')}
-          </Button>
+          {!areWeASubscriber && (
+            <Button
+              className={classNames(
+                'BadgeDialog__instructions-button',
+                currentBadge.category !== BadgeCategory.Donor &&
+                  'BadgeDialog__instructions-button--hidden'
+              )}
+              onClick={onShowInstructions}
+              size={ButtonSize.Large}
+            >
+              {i18n('BadgeDialog__become-a-sustainer-button')}
+            </Button>
+          )}
           <BadgeCarouselIndex
             currentIndex={currentBadgeIndex}
             totalCount={badges.length}

ts/components/conversation/ContactModal.stories.tsx

@@ -29,6 +29,7 @@ const defaultContact: ConversationType = getDefaultConversation({
 });
 
 const createProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
+  areWeASubscriber: false,
   areWeAdmin: boolean('areWeAdmin', overrideProps.areWeAdmin || false),
   badges: overrideProps.badges || [],
   contact: overrideProps.contact || defaultContact,

ts/components/conversation/ContactModal.tsx

@@ -16,6 +16,7 @@ import { SharedGroupNames } from '../SharedGroupNames';
 import { ConfirmationDialog } from '../ConfirmationDialog';
 
 export type PropsDataType = {
+  areWeASubscriber: boolean;
   areWeAdmin: boolean;
   badges: ReadonlyArray<BadgeType>;
   contact?: ConversationType;
@@ -50,6 +51,7 @@ enum ContactModalView {
 }
 
 export const ContactModal = ({
+  areWeASubscriber,
   areWeAdmin,
   badges,
   contact,
@@ -219,6 +221,7 @@ export const ContactModal = ({
     case ContactModalView.ShowingBadges:
       return (
         <BadgeDialog
+          areWeASubscriber={areWeASubscriber}
           badges={badges}
           firstName={contact.firstName}
           i18n={i18n}

ts/components/conversation/conversation-details/ConversationDetails.stories.tsx

@@ -37,6 +37,7 @@ const createProps = (hasGroupLink = false, expireTimer?: number): Props => ({
   addMembers: async () => {
     action('addMembers');
   },
+  areWeASubscriber: false,
   canEditGroupInfo: false,
   candidateContactsToAdd: times(10, () => getDefaultConversation()),
   conversation: expireTimer

ts/components/conversation/conversation-details/ConversationDetails.tsx

@@ -55,6 +55,7 @@ enum ModalState {
 
 export type StateProps = {
   addMembers: (conversationIds: ReadonlyArray<string>) => Promise<void>;
+  areWeASubscriber: boolean;
   badges?: ReadonlyArray<BadgeType>;
   canEditGroupInfo: boolean;
   candidateContactsToAdd: Array<ConversationType>;
@@ -109,6 +110,7 @@ export type Props = StateProps & ActionProps;
 
 export const ConversationDetails: React.ComponentType<Props> = ({
   addMembers,
+  areWeASubscriber,
   badges,
   canEditGroupInfo,
   candidateContactsToAdd,
@@ -316,6 +318,7 @@ export const ConversationDetails: React.ComponentType<Props> = ({
       )}
 
       <ConversationDetailsHeader
+        areWeASubscriber={areWeASubscriber}
         badges={badges}
         canEdit={canEditGroupInfo}
         conversation={conversation}

ts/components/conversation/conversation-details/ConversationDetailsHeader.stories.tsx

@@ -41,6 +41,7 @@ const Wrapper = (overrideProps: Partial<Props>) => {
 
   return (
     <ConversationDetailsHeader
+      areWeASubscriber={false}
       conversation={createConversation()}
       i18n={i18n}
       canEdit={false}

ts/components/conversation/conversation-details/ConversationDetailsHeader.tsx

@@ -17,6 +17,7 @@ import { BadgeDialog } from '../../BadgeDialog';
 import type { BadgeType } from '../../../badges/types';
 
 export type Props = {
+  areWeASubscriber: boolean;
   badges?: ReadonlyArray<BadgeType>;
   canEdit: boolean;
   conversation: ConversationType;
@@ -36,6 +37,7 @@ enum ConversationDetailsHeaderActiveModal {
 const bem = bemGenerator('ConversationDetails-header');
 
 export const ConversationDetailsHeader: React.ComponentType<Props> = ({
+  areWeASubscriber,
   badges,
   canEdit,
   conversation,
@@ -128,6 +130,7 @@ export const ConversationDetailsHeader: React.ComponentType<Props> = ({
     case ConversationDetailsHeaderActiveModal.ShowingBadges:
       modal = (
         <BadgeDialog
+          areWeASubscriber={areWeASubscriber}
           badges={badges || []}
           firstName={conversation.firstName}
           i18n={i18n}