implement billing banner

src/components/Icon/Illustrations.ts

@@ -49,6 +49,7 @@ import CompanyCard from '@assets/images/simple-illustrations/simple-illustration
 import ConciergeBubble from '@assets/images/simple-illustrations/simple-illustration__concierge-bubble.svg';
 import ConciergeNew from '@assets/images/simple-illustrations/simple-illustration__concierge.svg';
 import CreditCardsNew from '@assets/images/simple-illustrations/simple-illustration__credit-cards.svg';
+import CreditCardEyes from '@assets/images/simple-illustrations/simple-illustration__creditcardeyes.svg';
 import EmailAddress from '@assets/images/simple-illustrations/simple-illustration__email-address.svg';
 import FolderOpen from '@assets/images/simple-illustrations/simple-illustration__folder-open.svg';
 import Gears from '@assets/images/simple-illustrations/simple-illustration__gears.svg';
@@ -190,4 +191,5 @@ export {
     ExpensifyApprovedLogoLight,
     SendMoney,
     CheckmarkCircle,
+    CreditCardEyes,
 };

src/components/Section/index.tsx

@@ -86,6 +86,9 @@ type SectionProps = Partial<ChildrenProps> & {
 
     /** The height of the icon. */
     iconHeight?: number;
+
+    /** Banner to display at the top of the section */
+    banner?: ReactNode;
 };
 
 function isIllustrationLottieAnimation(illustration: DotLottieAnimation | IconAsset | undefined): illustration is DotLottieAnimation {
@@ -119,6 +122,7 @@ function Section({
     iconWidth,
     iconHeight,
     renderSubtitle,
+    banner = null,
 }: SectionProps) {
     const styles = useThemeStyles();
     const theme = useTheme();
@@ -133,6 +137,7 @@ function Section({
 
     return (
         <View style={[styles.pageWrapper, styles.cardSectionContainer, containerStyles, (isCentralPane || !!illustration) && styles.p0]}>
+            {banner}
             {cardLayout === CARD_LAYOUT.ICON_ON_TOP && (
                 <IconSection
                     width={iconWidth}

src/pages/settings/Subscription/CardSection/BillingBanner.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import {View} from 'react-native';
+import Icon from '@components/Icon';
+import * as Expensicons from '@components/Icon/Expensicons';
+import * as Illustrations from '@components/Icon/Illustrations';
+import Text from '@components/Text';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
+import variables from '@styles/variables';
+
+type BillingBannerProps = {
+    title?: string;
+    subtitle?: string;
+    isError?: boolean;
+    shouldShowRedDotIndicator?: boolean;
+    isTrialActive?: boolean;
+};
+
+function BillingBanner({title, subtitle, isError, shouldShowRedDotIndicator, isTrialActive}: BillingBannerProps) {
+    const styles = useThemeStyles();
+    const theme = useTheme();
+
+    const backgroundStyle = isTrialActive ? styles.trialBannerBackgroundColor : styles.hoveredComponentBG;
+
+    const subtitleStyle = isTrialActive ? [] : styles.textSupporting;
+
+    return (
+        <View style={[styles.pv4, styles.ph5, styles.flexRow, styles.gap3, styles.w100, styles.alignItemsCenter, backgroundStyle]}>
+            <Icon
+                src={isError ? Illustrations.CreditCardEyes : Illustrations.CheckmarkCircle}
+                width={variables.menuIconSize}
+                height={variables.menuIconSize}
+            />
+            <View style={[styles.flex1, styles.justifyContentCenter]}>
+                {title && <Text style={[styles.textStrong]}>{title}</Text>}
+                {subtitle && <Text style={subtitleStyle}>{subtitle}</Text>}
+            </View>
+            {isError && shouldShowRedDotIndicator && (
+                <Icon
+                    src={Expensicons.DotIndicator}
+                    fill={theme.danger}
+                />
+            )}
+        </View>
+    );
+}
+
+BillingBanner.displayName = 'BillingBanner';
+
+export default BillingBanner;

src/pages/settings/Subscription/CardSection/CardSection.tsx

@@ -11,6 +11,7 @@ import useThemeStyles from '@hooks/useThemeStyles';
 import DateUtils from '@libs/DateUtils';
 import ONYXKEYS from '@src/ONYXKEYS';
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
+import BillingBanner from './BillingBanner';
 import CardSectionActions from './CardSectionActions';
 import CardSectionDataEmpty from './CardSectionDataEmpty';
 
@@ -31,6 +32,15 @@ function CardSection() {
             isCentralPane
             titleStyles={styles.textStrong}
             subtitleMuted
+            banner={
+                <BillingBanner
+                    title="Your card couldn’t be charged!"
+                    subtitle="Before retrying, please call your bank directly to authorize Expensify charges and remove any holds. Otherwise, try adding a different payment card."
+                    isError // to show error icon
+                    shouldShowRedDotIndicator // to show red dot indicator
+                    isTrialActive
+                />
+            }
         >
             <View style={[styles.mt8, styles.mb3, styles.flexRow]}>
                 {!isEmptyObject(defaultCard?.accountData) && (

src/styles/index.ts

@@ -2848,6 +2848,10 @@ const styles = (theme: ThemeColors) =>
             width: variables.iconSizeExtraLarge,
         },
 
+        trialBannerBackgroundColor: {
+            backgroundColor: theme.trialBannerBackgroundColor,
+        },
+
         selectCircle: {
             width: variables.componentSizeSmall,
             height: variables.componentSizeSmall,

src/styles/theme/themes/dark.ts

@@ -83,6 +83,7 @@ const darkTheme = {
     ourMentionBG: colors.green600,
     tooltipSupportingText: colors.productLight800,
     tooltipPrimaryText: colors.productLight900,
+    trialBannerBackgroundColor: colors.green700,
     skeletonLHNIn: colors.productDark400,
     skeletonLHNOut: colors.productDark600,
     QRLogo: colors.green400,

src/styles/theme/themes/light.ts

@@ -83,6 +83,7 @@ const lightTheme = {
     ourMentionBG: colors.green100,
     tooltipSupportingText: colors.productDark800,
     tooltipPrimaryText: colors.productDark900,
+    trialBannerBackgroundColor: colors.green100,
     skeletonLHNIn: colors.productLight400,
     skeletonLHNOut: colors.productLight600,
     QRLogo: colors.green400,

src/styles/theme/types.ts

@@ -85,6 +85,7 @@ type ThemeColors = {
     ourMentionBG: Color;
     tooltipSupportingText: Color;
     tooltipPrimaryText: Color;
+    trialBannerBackgroundColor: Color;
     skeletonLHNIn: Color;
     skeletonLHNOut: Color;
     QRLogo: Color;