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

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}