[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: @fedirjh

[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.

[Themoonalsofall]

🚨 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.

[samranahm]

@fedirjh Draft PR #56208
cc @youssef-lr

[melvin-bot]

@fedirjh, @dubielzyk-expensify Whoops! This issue is 2 days overdue. Let's get this updated quick!

[dubielzyk-expensify]

Any updates here?

[samranahm]

@fedirjh @dubielzyk-expensify Please let me know what you think about my proposal. Thank you

[dubielzyk-expensify]

I'll let @youssef-lr handle the proposal bit 😄

[fedirjh]

@dubielzyk-expensify it seems this is awaiting the design mockups before it’s exported to external : #55879 (comment)

[dubielzyk-expensify]

Here's the mock of what we want:

[dubielzyk-expensify]

We'll wanna do this to avoid to much logic with the banner having two buttons sometimes and not others. Also we might make it dismissible in the future which would complicate things. cc @Expensify/design for viz

[shawnborton]

I think that's fair. I had originally wanted to put both buttons in the banner but you make a great point about it getting funky with three buttons.

That being said... what does mobile look like here? That might be a good reason to use the side-by-side buttons in the banner and then figure something else out for the dismiss button.

[dubielzyk-expensify]

Mobile would be like this then:

Or if we do what you suggested:

I can get down with what you're suggesting if we don't mind some special conditions.

[dannymcclain]

I like doing the side-by-side buttons to avoid that super tall header with the full-width buttons. If this banner needs to also be dismissible, I think we can just add a 16x16px X icon on the right. And if you did dismiss the banner, we'd add the Schedule demo button back into the header.

[dubielzyk-expensify]

Sounds good 👍 I'll update the OP

[melvin-bot]

Current assignee @fedirjh is eligible for the External assigner, not assigning anyone new.

[shawnborton]

@dubielzyk-expensify when you get a moment, can you update the original comment with the final mock we landed on? Thanks!

[dubielzyk-expensify]

Updated!

[anmurali]

@fedirjh - can you pick a proposal here?

[dubielzyk-expensify]

Not overdue, Melvin

[fedirjh]

@truph01's proposal looks good to me.

🎀 👀 🎀 C+ reviewed

[melvin-bot]

Triggered auto assignment to @MonilBhavsar, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[melvin-bot]

📣 @truph01 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job
Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[MonilBhavsar]

Like the side by side design and proposal looks good 👍

[truph01]

PR is ready @fedirjh

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 9.1.7-2 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Fix: Place schedule demo button on the discount banner when there is one #57092

If no regressions arise, payment will be issued on 2025-03-10. 🎊

For reference, here are some details about the assignees on this issue:

• @fedirjh requires payment through NewDot Manual Requests
• @truph01 requires payment automatic offer (Contributor)