From bdd0adc6e2b86741f8d8294b835003839df53c04 Mon Sep 17 00:00:00 2001 From: Yauheni Pasiukevich Date: Fri, 7 Jun 2024 14:03:37 +0200 Subject: [PATCH 1/8] implement billing banner --- .../simple-illustration__creditcardeyes.svg | 57 +++++++++++++++++++ src/components/Icon/Illustrations.ts | 2 + src/components/Section/index.tsx | 5 ++ .../CardSection/BillingBanner.tsx | 44 ++++++++++++++ 4 files changed, 108 insertions(+) create mode 100644 assets/images/simple-illustrations/simple-illustration__creditcardeyes.svg create mode 100644 src/pages/settings/Subscription/CardSection/BillingBanner.tsx diff --git a/assets/images/simple-illustrations/simple-illustration__creditcardeyes.svg b/assets/images/simple-illustrations/simple-illustration__creditcardeyes.svg new file mode 100644 index 000000000000..17ff47e6ca12 --- /dev/null +++ b/assets/images/simple-illustrations/simple-illustration__creditcardeyes.svg @@ -0,0 +1,57 @@ + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/components/Icon/Illustrations.ts b/src/components/Icon/Illustrations.ts index 53b8aa8acb72..3fe36239d631 100644 --- a/src/components/Icon/Illustrations.ts +++ b/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, }; diff --git a/src/components/Section/index.tsx b/src/components/Section/index.tsx index e7cadbe73b82..49ef1e89cff9 100644 --- a/src/components/Section/index.tsx +++ b/src/components/Section/index.tsx @@ -86,6 +86,9 @@ type SectionProps = Partial & { /** 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 ( + {banner} {cardLayout === CARD_LAYOUT.ICON_ON_TOP && ( + + + {title} + {subtitle} + + {isError && shouldShowRedDotIndicator && ( + + )} + + ); +} + +BillingBanner.displayName = 'BillingBanner'; + +export default BillingBanner; From 58fe38188973d11947d8912b7a30464e13230e6a Mon Sep 17 00:00:00 2001 From: Yauheni Pasiukevich Date: Fri, 7 Jun 2024 17:17:33 +0200 Subject: [PATCH 2/8] fix header --- src/pages/settings/Subscription/CardSection/BillingBanner.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/settings/Subscription/CardSection/BillingBanner.tsx b/src/pages/settings/Subscription/CardSection/BillingBanner.tsx index 6aed715563b1..0ccffdf511fc 100644 --- a/src/pages/settings/Subscription/CardSection/BillingBanner.tsx +++ b/src/pages/settings/Subscription/CardSection/BillingBanner.tsx @@ -26,7 +26,7 @@ function BillingBanner({title, subtitle, isError, shouldShowRedDotIndicator}: Bi height={48} /> - {title} + {title} {subtitle} {isError && shouldShowRedDotIndicator && ( From 24875929993f87d1263bcd2ff21151c99159ff67 Mon Sep 17 00:00:00 2001 From: Yauheni Pasiukevich Date: Fri, 7 Jun 2024 17:45:28 +0200 Subject: [PATCH 3/8] fix banner subtitle --- .../settings/Subscription/CardSection/BillingBanner.tsx | 2 +- src/styles/index.ts | 5 +++++ 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/src/pages/settings/Subscription/CardSection/BillingBanner.tsx b/src/pages/settings/Subscription/CardSection/BillingBanner.tsx index 0ccffdf511fc..3bf183a2a3d8 100644 --- a/src/pages/settings/Subscription/CardSection/BillingBanner.tsx +++ b/src/pages/settings/Subscription/CardSection/BillingBanner.tsx @@ -27,7 +27,7 @@ function BillingBanner({title, subtitle, isError, shouldShowRedDotIndicator}: Bi /> {title} - {subtitle} + {subtitle} {isError && shouldShowRedDotIndicator && ( width: variables.iconSizeExtraLarge, }, + billingBannerSubtitle: { + color: theme.textSupporting, + lineHeight: variables.lineHeightXLarge, + }, + selectCircle: { width: variables.componentSizeSmall, height: variables.componentSizeSmall, From 94f0a013cba1acb5c72407e2ef01ba523d951745 Mon Sep 17 00:00:00 2001 From: Yauheni Pasiukevich Date: Mon, 10 Jun 2024 11:26:16 +0200 Subject: [PATCH 4/8] remove specific style --- .../settings/Subscription/CardSection/BillingBanner.tsx | 2 +- src/styles/index.ts | 9 ++++----- 2 files changed, 5 insertions(+), 6 deletions(-) diff --git a/src/pages/settings/Subscription/CardSection/BillingBanner.tsx b/src/pages/settings/Subscription/CardSection/BillingBanner.tsx index 3bf183a2a3d8..61ee2bc9552c 100644 --- a/src/pages/settings/Subscription/CardSection/BillingBanner.tsx +++ b/src/pages/settings/Subscription/CardSection/BillingBanner.tsx @@ -27,7 +27,7 @@ function BillingBanner({title, subtitle, isError, shouldShowRedDotIndicator}: Bi /> {title} - {subtitle} + {subtitle} {isError && shouldShowRedDotIndicator && ( fontWeight: FontUtils.fontWeight.bold, }, + textLineHeightXLarge: { + lineHeight: variables.lineHeightXLarge, + }, + fontWeightNormal: { fontWeight: FontUtils.fontWeight.normal, }, @@ -2848,11 +2852,6 @@ const styles = (theme: ThemeColors) => width: variables.iconSizeExtraLarge, }, - billingBannerSubtitle: { - color: theme.textSupporting, - lineHeight: variables.lineHeightXLarge, - }, - selectCircle: { width: variables.componentSizeSmall, height: variables.componentSizeSmall, From f0e23c9a8305d55afdd9ffb4ccace2c90946066a Mon Sep 17 00:00:00 2001 From: Yauheni Pasiukevich Date: Mon, 10 Jun 2024 11:44:25 +0200 Subject: [PATCH 5/8] remove specific lineHeight --- src/pages/settings/Subscription/CardSection/BillingBanner.tsx | 2 +- src/styles/index.ts | 4 ---- 2 files changed, 1 insertion(+), 5 deletions(-) diff --git a/src/pages/settings/Subscription/CardSection/BillingBanner.tsx b/src/pages/settings/Subscription/CardSection/BillingBanner.tsx index 61ee2bc9552c..1ae20f177431 100644 --- a/src/pages/settings/Subscription/CardSection/BillingBanner.tsx +++ b/src/pages/settings/Subscription/CardSection/BillingBanner.tsx @@ -27,7 +27,7 @@ function BillingBanner({title, subtitle, isError, shouldShowRedDotIndicator}: Bi /> {title} - {subtitle} + {subtitle} {isError && shouldShowRedDotIndicator && ( fontWeight: FontUtils.fontWeight.bold, }, - textLineHeightXLarge: { - lineHeight: variables.lineHeightXLarge, - }, - fontWeightNormal: { fontWeight: FontUtils.fontWeight.normal, }, From 0dd74d72ac48b16bd0e92ab19960e101b86e750e Mon Sep 17 00:00:00 2001 From: Yauheni Pasiukevich Date: Mon, 10 Jun 2024 20:45:23 +0200 Subject: [PATCH 6/8] update props, add variables --- .../Subscription/CardSection/BillingBanner.tsx | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/src/pages/settings/Subscription/CardSection/BillingBanner.tsx b/src/pages/settings/Subscription/CardSection/BillingBanner.tsx index 1ae20f177431..062ab5c8db58 100644 --- a/src/pages/settings/Subscription/CardSection/BillingBanner.tsx +++ b/src/pages/settings/Subscription/CardSection/BillingBanner.tsx @@ -6,10 +6,11 @@ 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; + title?: string; + subtitle?: string; isError?: boolean; shouldShowRedDotIndicator?: boolean; }; @@ -22,12 +23,12 @@ function BillingBanner({title, subtitle, isError, shouldShowRedDotIndicator}: Bi - {title} - {subtitle} + {title && {title}} + {subtitle && {subtitle}} {isError && shouldShowRedDotIndicator && ( Date: Tue, 11 Jun 2024 16:30:06 +0200 Subject: [PATCH 7/8] update ui --- .../Subscription/CardSection/BillingBanner.tsx | 13 +++++++++---- .../Subscription/CardSection/CardSection.tsx | 10 ++++++++++ src/styles/index.ts | 4 ++++ src/styles/theme/themes/dark.ts | 1 + src/styles/theme/themes/light.ts | 1 + src/styles/theme/types.ts | 1 + 6 files changed, 26 insertions(+), 4 deletions(-) diff --git a/src/pages/settings/Subscription/CardSection/BillingBanner.tsx b/src/pages/settings/Subscription/CardSection/BillingBanner.tsx index 062ab5c8db58..163c43aa1359 100644 --- a/src/pages/settings/Subscription/CardSection/BillingBanner.tsx +++ b/src/pages/settings/Subscription/CardSection/BillingBanner.tsx @@ -13,22 +13,27 @@ type BillingBannerProps = { subtitle?: string; isError?: boolean; shouldShowRedDotIndicator?: boolean; + isTrialActive?: boolean; }; -function BillingBanner({title, subtitle, isError, shouldShowRedDotIndicator}: BillingBannerProps) { +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 ( - + - {title && {title}} - {subtitle && {subtitle}} + {title && {title}} + {subtitle && {subtitle}} {isError && shouldShowRedDotIndicator && ( + } > {!isEmptyObject(defaultCard?.accountData) && ( diff --git a/src/styles/index.ts b/src/styles/index.ts index 7b49b90505ba..f4b8d0b0b91d 100644 --- a/src/styles/index.ts +++ b/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, diff --git a/src/styles/theme/themes/dark.ts b/src/styles/theme/themes/dark.ts index f0493a815747..418d45b8ab64 100644 --- a/src/styles/theme/themes/dark.ts +++ b/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, diff --git a/src/styles/theme/themes/light.ts b/src/styles/theme/themes/light.ts index cf490a90a7f7..12f059738e13 100644 --- a/src/styles/theme/themes/light.ts +++ b/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, diff --git a/src/styles/theme/types.ts b/src/styles/theme/types.ts index 8be9f3226fe5..a388d06bc51e 100644 --- a/src/styles/theme/types.ts +++ b/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; From 1baaae034c150e41279c3329ea39e8891367d9d8 Mon Sep 17 00:00:00 2001 From: Yauheni Pasiukevich Date: Tue, 11 Jun 2024 19:51:08 +0200 Subject: [PATCH 8/8] remove dummy code --- .../settings/Subscription/CardSection/CardSection.tsx | 10 ---------- 1 file changed, 10 deletions(-) diff --git a/src/pages/settings/Subscription/CardSection/CardSection.tsx b/src/pages/settings/Subscription/CardSection/CardSection.tsx index 43411737604f..da65c9d74f07 100644 --- a/src/pages/settings/Subscription/CardSection/CardSection.tsx +++ b/src/pages/settings/Subscription/CardSection/CardSection.tsx @@ -11,7 +11,6 @@ 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'; @@ -32,15 +31,6 @@ function CardSection() { isCentralPane titleStyles={styles.textStrong} subtitleMuted - banner={ - - } > {!isEmptyObject(defaultCard?.accountData) && (