[New Feature] Add Guide booking link to #admins header

[muttmuure]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Version Number: v9.0.73-0 Reproducible in staging?: Y Reproducible in production?: Y If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: If this was caught during regression testing, add the test name, ID and link from TestRail: Email or phone of affected tester (no customers): Logs: https://stackoverflow.com/c/expensify/questions/4856 Expensify/Expensify Issue URL: Issue reported by: @muttmuure Slack conversation (hyperlinked to channel name): https://expensify.slack.com/archives/C07HPDRELLD/p1732636200993259

Action Performed:

Open #admins room for Workspace

Expected Result:

See Guide/Account Manager booking link in header

Actual Result:

N/A (this is a new feature)

Workaround:

Can the user still use Expensify without this being fixed? Have you informed them of the workaround?

Platforms:

Which of our officially supported platforms is this issue occurring on?

• [ ] Android: Standalone
• [ ] Android: HybridApp
• [ ] Android: mWeb Chrome
• [ ] iOS: Standalone
• [ ] iOS: HybridApp
• [ ] iOS: mWeb Safari
• [ ] MacOS: Chrome / Safari
• [ ] MacOS: Desktop

Screenshots/Videos

Just an idea

Add any screenshot/video evidence

View all open jobs on GitHub

[melvin-bot[bot]]

Triggered auto assignment to @anmurali (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[melvin-bot[bot]]

Triggered auto assignment to @joekaufmanexpensify (NewFeature), see https://stackoverflowteams.com/c/expensify/questions/14418#:~:text=BugZero%20process%20steps%20for%20feature%20requests for more details. Please add this Feature request to a GH project, as outlined in the SO.

[melvin-bot[bot]]

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

[muttmuure]

Adding the @Expensify/design label so we can discuss possible ways to improve the call booking link visibility

[ChavdaSachin]

Edited by proposal-police: This proposal was edited at 2024-12-09 18:06:19 UTC.

Proposal

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

Add Guide booking link to #admins header

What is the root cause of that problem?

New Feature

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

Conditionally render Book A Demo button from HeaderView.tsx .

add following snippet here

    const shouldShowDemoButton = ReportUtils.isAdminRoom(report);
    const bookDemo = () => {
        Linking.openURL(CONST.BOOK_DEMO_URL);
    }

And conditionally render button here.

    {shouldShowDemoButton &&
        <Button
        success//Pass this prop based on design team's suggestion for theme
        onPress={bookDemo}
        icon={}//add  whatever icon design team suggests
        text={translate('common.bookDemo')}
        style={[shouldUseNarrowLayout && styles.flex1]}
        />
    }

https://github.com/Expensify/App/blob/dc07fc67e8064b5941f7f8467d9bd5403c81f817/src/pages/home/HeaderView.tsx#L295-L296

And add translations to en.ts and es.ts file and add url to consts.ts file(currently there is no direct url available for booking a general demo with team, url for travel demo is avilable).

And do some small UI adjustments as design team demands.

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

NA

Result

Option 1 (with success prop passed to the button)

Option 2 (without passing success prop to button)

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

[nkdengineer]

Edited by proposal-police: This proposal was edited at 2024-12-10 05:18:29 UTC.

Proposal

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

Add Guide booking link to #admins header

What is the root cause of that problem?

New feature

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

After this PR, we can have a way to get the guide data. Here is an example guild data.

1. We should only show the Guide booking in the admin room that has the reportID as account.adminsRoomReportID and the link to open is the canlenderLink

const shouldShowGuideBooking = report?.reportID === account.adminRoomReportID && account.guildDetails.email;
const guideBookingButton = (
    <Button
        success
        text={translate('common.guideBooking')}
        onPress={() => {
            openExternalLink(account.canlenderLink)
        }}
        icon={Expensicons.CalendarSolid}
    />
);

2. We need to add this button here for the large screen

{shouldShowGuideBooking && !shouldUseNarrowLayout && guideBookingButton}

https://github.com/Expensify/App/blob/dc07fc67e8064b5941f7f8467d9bd5403c81f817/src/pages/home/HeaderView.tsx#L291

and here for the small screen

{!isLoading && shouldShowGuideBooking && shouldUseNarrowLayout && <View style={[styles.pb3, styles.ph5]}>{guideBookingButton}</View>}

https://github.com/Expensify/App/blob/dc07fc67e8064b5941f7f8467d9bd5403c81f817/src/pages/home/HeaderView.tsx#L316

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

It's a new UI, no need to add a test.

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.

[shawnborton]

We could just use a green button much like we do for the "Start a free trial" button on the Concierge view?

[dannymcclain]

Will this live along side the early adoption discount?

[joekaufmanexpensify]

Seems like I was assigned as a second BZ assignee on this issue. I don't think it needs two though, so going to unassign for now. LMK if there is anything I can help with though!

[dubielzyk-expensify]

Great Qs from the design team. Agree that the treatment Shawn is using is the right one and as long as early adoption discount isn't in the #admin room, then that could work.

[nkdengineer]

@dubielzyk-expensify Is the icon is an existing icon in the App?

[dubielzyk-expensify]

Yep. Here it is

[shawnborton]

Mock looks great!

[shawnborton]

@muttmuure at what point will we not show this button anymore? Once the user has taken a demo? Or once the user converts to a paid policy? Something else?

[muttmuure]

I think once they convert to a paid policy makes the most sense.

[muttmuure]

It's common for customers to take multiple demos

[dannymcclain]

Mock looks good to me! Might want to show the mobile version too just for super ultra clarity.

[dubielzyk-expensify]

Mobile mock:

[shawnborton]

Looks great!

[melvin-bot[bot]]

@anmurali, @dubielzyk-expensify Huh... This is 4 days overdue. Who can take care of this?

[muttmuure]

Ready for the EXTERNAL label?

[dubielzyk-expensify]

Let's do it

[melvin-bot[bot]]

Job added to Upwork: https://www.upwork.com/jobs/~021869030905695211861

[melvin-bot[bot]]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @eh2077 (External)

[eh2077]

I think we can go with @nkdengineer 's proposal because their proposal is more thoughtful than the other one.

[!NOTE]
https://github.com/Expensify/App/issues/53764#issuecomment-2531736033

@muttmuure at what point will we not show this button anymore? Once the user has taken a demo? Or once the user converts to a paid policy? Something else?

I think once they convert to a paid policy makes the most sense.

🎀👀🎀 C+ reviewed

[melvin-bot[bot]]

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

[melvin-bot[bot]]

📣 @nkdengineer 🎉 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 📖

[grgia]

Thanks for your proposal @nkdengineer, all yours!

[melvin-bot[bot]]

This issue has not been updated in over 15 days. @anmurali, @grgia, @eh2077, @dubielzyk-expensify, @nkdengineer eroding to Monthly issue.

P.S. Is everyone reading this sure this is really a near-term priority? Be brave: if you disagree, go ahead and close it out. If someone disagrees, they'll reopen it, and if they don't: one less thing to do!

[grgia]

PR in final review