[Due for payment 2025-03-21] [Due for payment 2025-03-10] [$250] Make the Schedule Demo a primary static button and place it on the discount banner when there is one

[anmurali]

Problem:
The schedule demo and claim offer CTAs are competing on #admins for a new lead. We want the claim offer to be the focus.

It looks like this today:

Solution

1. Make the Schedule Demo a primary static action button style
2. When there is a offer banner, place it to the left of the Claim offer CTA on the banner

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021889297084334961978
• Upwork Job ID: 1889297084334961978
• Last Price Increase: 2025-02-11
• Automatic offers:
• truph01 | Contributor | 106166321

Issue Owner

Current Issue Owner: @

Issue Owner

Current Issue Owner: @bfitzexpensify

[melvin-bot]

Triggered auto assignment to @dubielzyk-expensify (Design), see these Stack Overflow questions for more details.

[anmurali]

Ill add an External once we have a mockup for what we want.

🚨 Edited by proposal-police: This proposal was edited at 2025-01-28 16:33:57 UTC.

Proposal

Please re-state the problem that we are trying to solve in this issue.

Make the Schedule Demo a primary static button and place it on the discount banner when there is one

What is the root cause of that problem?

This is UI improvement

What changes do you think we should make in order to solve the problem?

1. We need to add new props to EarlyDiscountBanner component: shouldShowScheduleDemoButton and pass it as shouldShowGuideBooking in HeaderView
2. Add new button to EarlyDiscountBanner component

        <Button
            text={translate('getAssistancePage.scheduleADemo')}
            onPress={() => {
                openExternalLink(account?.guideDetails?.calendarLink ?? '');
            }}
            style={styles.mr2}
            icon={CalendarSolid}
        />

With solution 'Make the Schedule Demo a primary static action button style', I think we can still leave Schedule demo button as success in case we don't show banner. Because we have case of showing both buttons on header view like here

Some minor style changes can be discuss in PR phase

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

NA

What alternative solutions did you explore? (Optional)

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[samranahm]

🚨 Edited by proposal-police: This proposal was edited at 2025-01-30 12:13:59 UTC.

Proposal

Please re-state the problem that we are trying to solve in this issue.

Make the Schedule Demo a primary static button and place it on the discount banner when there is one

What is the root cause of that problem?

N/A UI improvement

What changes do you think we should make in order to solve the problem?

1. We should use useContext to create a global state that will track the EarlyDiscountBanner state, and update

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

Line 34 in f7f5df4

const [isDismissed, setIsDismissed] = useState(false);

to

const {isDismissed, setIsDismissed} = useContext(EarlyDiscountContext);

2. Check whether we should display the Schedule Demo button in HeaderView based on EarlyDiscountContext

const {isDismissed} = useContext(EarlyDiscountContext);

And update shouldShowGuideBooking

App/src/pages/home/HeaderView.tsx

Line 161 in f7f5df4

const shouldShowGuideBooking = !!account && report?.reportID === account?.adminsRoomReportID && !!account?.guideDetails?.calendarLink;

to

const shouldShowGuideBooking = !!account && isDismissed && report?.reportID === account?.adminsRoomReportID && !!account?.guideDetails?.calendarLink;

3. Add new button in EarlyDiscountBanner

{!isSmallScreenWidth && (
<Button
   text={translate('getAssistancePage.scheduleADemo')}
   onPress={() => {
           openExternalLink(account?.guideDetails?.calendarLink ?? '');
   }}
   style={shouldUseNarrowLayout && styles.flex1}
/>)}

This way we can display scheduleADemo button (primary) in EarlyDiscountBanner and once the discountType become 25 No thanks button appear on pressing this button Banner will be Dismissed and scheduleADemo will appear in HeaderView

---

Edit: After 24 hours discountInfo?.discountType === 25 a new No thanks button appear in discount banner that change the Schedule demo to ellipsis, so instead of having all three buttons in small screen width, we should toggle Schedule demo and No thanks button based on discountType

here in EarlyDiscountBanner

<View style={[styles.flexRow, styles.gap2, smallScreenStyle]}>
   <Button
       success
       style={shouldUseNarrowLayout && styles.flex1}
       text={translate('subscription.billingBanner.earlyDiscount.claimOffer')}
       onPress={() => Navigation.navigate(ROUTES.SETTINGS_SUBSCRIPTION)}
   />
   {discountInfo?.discountType === 25 && (
   <Button
           style={shouldUseNarrowLayout && styles.flex1}
           text={translate('subscription.billingBanner.earlyDiscount.noThanks')}
           onPress={() => setIsDismissed()}
   />
   )}
   {(!shouldUseNarrowLayout || discountInfo?.discountType === 50) && (
   <Button
           text={translate('getAssistancePage.scheduleADemo')}
           onPress={() => {
               openExternalLink(account?.guideDetails?.calendarLink ?? '');
           }}
           style={shouldUseNarrowLayout && styles.flex1}
   />)}
</View>

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

N/A

What alternative solutions did you explore? (Optional)

on discountInfo?.discountType === 25

Screen.Recording.2025-01-29.at.11.50.39.AM.mov

[truph01]

🚨 Edited by proposal-police: This proposal was edited at 2025-02-06 18:26:27 UTC.

Proposal

Please re-state the problem that we are trying to solve in this issue.

• Feature request: Make the Schedule Dem

What is the root cause of that problem?

• It is a feature request, so I think we don't need RCA section.

What changes do you think we should make in order to solve the problem?

• We will move the schedule demo button to the discount banner once the banner is shown. To do it, we need to make the changes in two files. Below are the main steps.

1. EarlyDiscountBanner.tsx file:

• In here:

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

Line 23 in f7f5df4

function EarlyDiscountBanner({isSubscriptionPage}: EarlyDiscountBannerProps) {

introduce new prop guideBookingButton?: React.JSX.Element. Then use it here:

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

Line 49 in f7f5df4

<Button

                {guideBookingButton}

2. HeaderView.tsx file:

• Update:

App/src/pages/home/HeaderView.tsx

Line 339 in f7f5df4

{shouldShowGuideBooking && !shouldUseNarrowLayout && guideBookingButton}

                                    {!shouldShowGuideBookingButtonInEarlyDiscountBanner && shouldShowGuideBookingButton && guideBookingButton}

and

App/src/pages/home/HeaderView.tsx

Line 389 in f7f5df4

{shouldShowDiscount && isChatUsedForOnboarding && <EarlyDiscountBanner isSubscriptionPage={false} />}

            {shouldShowEarlyDiscountBanner && (
                <EarlyDiscountBanner
                    guideBookingButton={shouldShowGuideBookingButtonInEarlyDiscountBanner ? guideBookingButton : undefined}
                    isSubscriptionPage={false}
                />
            )}

• In above, there are a few new variables:

    const shouldShowGuideBookingButton = true;
    const shouldShowEarlyDiscountBanner = true;
    const shouldShowGuideBookingButtonInEarlyDiscountBanner = shouldShowGuideBookingButton && shouldShowEarlyDiscountBanner;

• Removing this line:

App/src/pages/home/HeaderView.tsx

Line 209 in f7f5df4

success

can apply the primary static style to the schedule demo button.

3. To fix the Schedule button issue in mobile devices, we can update:

App/src/pages/home/HeaderView.tsx

Line 220 in f7f5df4

if (isChatUsedForOnboarding) {

        if (isChatUsedForOnboarding && !shouldShowDiscount) {

and

App/src/pages/home/HeaderView.tsx

Line 369 in f7f5df4

<View style={isChatUsedForOnboarding && shouldShowGuideBooking && [styles.dFlex, styles.flexRow]}>

                <View style={isChatUsedForOnboarding && !shouldShowDiscount && shouldShowGuideBooking && [styles.dFlex, styles.flexRow]}>

4. Replace the "No thanks" button by "x" button:

• Remove this "No thanks" button and create:

    const dismissButton = (
        <Tooltip text={translate('common.close')}>
            <PressableWithFeedback
                onPress={() => setIsDismissed(true)}
                role={CONST.ROLE.BUTTON}
                accessibilityLabel={translate('common.close')}
            >
                <Icon
                    src={Expensicons.Close}
                    fill={theme.icon}
                />
            </PressableWithFeedback>
        </Tooltip>
    );

• With large screen device, in here:

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

Line 56 in f7f5df4

<Button

use

                {discountInfo?.discountType === 25 && (shouldUseNarrowLayout ? undefined : dismissButton)}

• With small screen device, in:

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

Line 87 in f7f5df4

<BillingBanner

use:

        <BillingBanner
            dismissButton={discountInfo?.discountType === 25 && (shouldUseNarrowLayout ? dismissButton : undefined)}
        />

• The dismissButton will be passed down and use in:

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

Line 107 in f7f5df4

{typeof title === 'string' ? <Text style={[styles.textStrong, titleStyle]}>{title}</Text> : title}

                <View style={[styles.flex1, styles.justifyContentBetween, {flexDirection: 'row'}]}>
                    {typeof title === 'string' ? <Text style={[styles.textStrong, titleStyle]}>{title}</Text> : title}
                    {dismissButton}
                </View>

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

• No need test since it is feature request.

What alternative solutions did you explore? (Optional)

Alternative solution 1

• Removing this line:

App/src/pages/home/HeaderView.tsx

Line 209 in f7f5df4

success

can apply the primary static style to the schedule demo button.

Alternative solution 2

• We can update:
  

  App/src/pages/home/HeaderView.tsx

  Line 209 in f7f5df4

  success

            success={!(shouldShowDiscount && isChatUsedForOnboarding)}

[github-actions]

⚠️ @truph01 Thanks for your proposal. Please update it to follow the proposal template, as proposals are only reviewed if they follow that format (note the mandatory sections).

[samranahm]

Proposal updated

Updates

• Resolve issue #55836
• Toggle Schedule demo & No thanks buttons on SmallScreenWidth

[youssef-lr]

Assigning C+ from dupe issue that I just closed.