[Due for payment 2025-06-11] [$250] Add a `Register for webinar` button on the admins page in New Expensify

[zsgreenwald]

Feature Description

Add a Register for webinar button in the #admins room in New Expensify. The button will route admins here: https://events.zoom.us/eo/Aif1I8qCi1GZ7KnLnd1vwGPmeukSRoPjFpyFAZ2udQWn0-B86e1Z~AggLXsr32QYFjq8BlYLZ5I06Dg

cc: @anmurali I can't get into NewDot today, do you have a screenshot handy?

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021914402340921803150
• Upwork Job ID: 1914402340921803150
• Last Price Increase: 2025-04-21
• Automatic offers:
• samranahm | Contributor | 107108402

Issue Owner

Current Issue Owner: @

Issue Owner

Current Issue Owner: @

Issue Owner

Current Issue Owner: @trjExpensify

[melvin-bot]

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

[melvin-bot]

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

[samranahm]

🚨 Edited by proposal-police: This proposal was edited at 2025-04-21 19:45:55 UTC.

Proposal

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

Add a Register for webinar button on the admins page in New Expensify

What is the root cause of that problem?

New feature

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

First we need to add this url

REGISTER_FOR_WEBINAR_URL: 'https://events.zoom.us/eo/Aif1I8qCi1GZ7KnLnd1vwGPmeukSRoPjFpyFAZ2udQWn0-B86e1Z~AggLXsr32QYFjq8BlYLZ5I06Dg'

in our CONST.ts file

• Create options Talk to sales and Register for webinar in header view

Pseudo code onboardingHelpDropdownButton

const shouldShowRegisterForWebinar = introSelected?.companySize === CONST.ONBOARDING_COMPANY_SIZE.MICRO && isAdminRoom(report);

const onboardingHelpDropdownButton = () => {
const options: Array<DropdownOption<OnboardingHelpType>> = [];
const talkToSalesOption = getTalkToSalesData({accountID, introSelected, talkToAISales, reportID: report?.reportID});

if (shouldShowTalkToSales && talkToSalesOption) {
    options.push({
        text: talkToSalesOption.talkToSaleText,
        icon: talkToSalesOption.talkToSalesIcon,
        value: CONST.REPORT.ONBOARDING_HELP.TALK_TO_SALES,
        onSelected: () => {
            if (!report?.reportID) return;

            if (talkToAISales?.isTalkingToAISales) {
                stopConnection();
            } else {
                initializeOpenAIRealtime(Number(report.reportID) ?? CONST.DEFAULT_NUMBER_ID, talkToSalesOption.abTestCtaText);
            }
        },
    });
}

if (shouldShowRegisterForWebinar) {
    options.push({
        text: translate('getAssistancePage.registerForWebinar'),
        icon: Monitor,
        value: CONST.REPORT.ONBOARDING_HELP.REGISTER_FOR_WEBINAR,
        onSelected: () => {
            openExternalLink(CONST.REGISTER_FOR_WEBINAR_URL);
        },
    });
}

if (options.length === 0) {
    return undefined;
}
return (
    <ButtonWithDropdownMenu
        onPress={() => null}
        success={false}
        buttonSize={CONST.DROPDOWN_BUTTON_SIZE.MEDIUM}
        options={options}
        isSplitButton={false}
        customText={translate('getAssistancePage.onboardingHelp')}
    />
);
};

---

• To get the icon and text based on accountID and talkToAISales status, we need to move this button to TalkToSalesUtils.ts – getTalkToSalesData.

Pseudo code getTalkToSalesData

function getTalkToSalesData({accountID, introSelected, talkToAISales, reportID}: GetTalkToSalesDataProps) {
if (!reportID || !accountID) {
  return;
}

if (introSelected?.companySize !== CONST.ONBOARDING_COMPANY_SIZE.MICRO) {
  return null;
}

const availableCTAs = [translateLocal('aiSales.getHelp'), translateLocal('aiSales.talkToSales'), translateLocal('aiSales.talkToConcierge')];
const abTestCtaText = availableCTAs.at(accountID % availableCTAs.length) ?? translateLocal('aiSales.talkToSales');

const talkToSaleText = talkToAISales?.isTalkingToAISales ? translateLocal('aiSales.hangUp') : abTestCtaText;
const talkToSalesIcon = talkToAISales?.isLoading ? undefined : talkToAISales?.isTalkingToAISales ? Close : Phone;

return {
  talkToSalesIcon,
  talkToSaleText,
  abTestCtaText,
};
}

And finally update

App/src/pages/home/HeaderView.tsx

Line 357 in 4a087a6

{!shouldShowEarlyDiscountBanner && shouldShowTalkToSales && !shouldUseNarrowLayout && talkToSalesButton}

with to match with design doc

{(shouldShowTalkToSales || shouldShowRegisterForWebinar) && !shouldUseNarrowLayout && onboardingHelpDropdownButton()}

• For smallScreenWidth we need to refactor this block to handle all cases mentioned here

<View style={isChatUsedForOnboarding && !shouldShowDiscount && shouldShowGuideBooking && [styles.dFlex, styles.flexRow]}>
    <View style={[getActionButtonStyles(), styles.flexRow, styles.alignItemsCenter]}>
        {!shouldShowEarlyDiscountBanner && (shouldShowTalkToSales || shouldShowRegisterForWebinar) && shouldUseNarrowLayout && (
            <View style={styles.flex1}>{onboardingHelpDropdownButton()}</View>
        )}
        {!isLoading && !shouldShowDiscount && isChatUsedForOnboarding && shouldUseNarrowLayout && (
            <FreeTrial
                pressable
                addSpacing
                success={!shouldShowGuideBooking}
                inARow={shouldShowGuideBooking}
            />
        )}
    </View>

    {!shouldShowGuideBookingButtonInEarlyDiscountBanner && !isLoading && shouldShowGuideBooking && shouldUseNarrowLayout && (
        <View style={getActionButtonStyles()}>{guideBookingButton}</View>
    )}
</View>

We want to keep Onboarding help in header on Large screens even when Early Discount Banner is visible so we should update the banner to only show onboardingHelpDropdownButton on small screen width

<EarlyDiscountBanner
          onboardingHelpDropdownButton={shouldUseNarrowLayout ? onboardingHelpDropdownButton() : undefined}

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)

As discussed here now we want to have both talkToSalesButton and registerForWebinarButton so no need to create a new button RegisterForWebinarButton here

App/src/pages/home/HeaderView.tsx

Lines 229 to 234 in 53a4f33

	const talkToSalesButton = (
	<TalkToSalesButton
	reportID={report?.reportID}
	shouldUseNarrowLayout={shouldUseNarrowLayout}
	/>
	);

const registerForWebinarButton = (
    <Button
        success
        text={translate('getAssistancePage.registerForWebinar')}
        onPress={() => {
            openExternalLink(CONST.REGISTER_FOR_WEBINAR_URL);
        }}
        style={shouldUseNarrowLayout && shouldShowRegisterForWebinar && [styles.flex1]}
        icon={RegisterForWebinarIcon}
    />
);

Note: SInce we want to show this button to cohort 1-10 under the same cercomstances

App/src/libs/Permissions.ts

Lines 53 to 55 in 53a4f33

	function canUseTalkToAISales(betas: OnyxEntry<Beta[]>): boolean {
	return !!betas?.includes(CONST.BETAS.NEW_DOT_TALK_TO_AI_SALES) || canUseAllBetas(betas);
	}

Then update this logic as

const {canUseTalkToAISales, canUseLeftHandBar} = usePermissions();
const shouldShowRegisterForWebinarAndTalkToAISales
= !!canUseTalkToAISales && isAdminRoom(report);

and update this talkToAISales button to have registerForWebinar alongside like we did here

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

Lines 84 to 86 in 53a4f33

	<View style={[styles.flexRow, styles.gap2, smallScreenStyle, styles.alignItemsCenter]}>
	{TalkToSalesButton}
	{GuideBookingButton}

   {!shouldShowEarlyDiscountBanner && shouldShowRegisterForWebinarAndTalkToAISales && !shouldUseNarrowLayout && talkToSalesButton && registerForWebinarButton}

And update this to other places as well where we use talkToSalesButton in HeaderView to have both buttons side by side

[zsgreenwald]

Yep, but also, this would replace talkToSalesButton. We wouldn't have both.

[truph01]

@zsgreenwald Just to clarify—currently, the talkToSalesButton is always visible in the admin room. However, you mentioned that "this would replace talkToSalesButton," which makes me a bit confused. Could you clarify under what conditions we should show the "Register for webinar" button instead? Should it replace talkToSalesButton in the admin room, or only under specific circumstances?

[PiyushChandra17]

Proposal

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

Add a Register for webinar button on the admins page in New Expensify

What is the root cause of that problem?

It's a new feature, hence no root cause

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

We should add a Button right here,

App/src/components/ReportWelcomeText.tsx

Lines 181 to 188 in 063d8b3

	{isChatRoom && isAdminRoom && !isArchivedRoom && (
	<Text>
	<Text>{welcomeMessage.phrase1}</Text>
	{welcomeMessage.phrase2 !== undefined && <Text style={styles.textStrong}>{welcomeMessage.phrase2}</Text>}
	{welcomeMessage.phrase3 !== undefined && <Text>{welcomeMessage.phrase3}</Text>}
	{welcomeMessage.phrase4 !== undefined && <Text>{welcomeMessage.phrase4}</Text>}
	</Text>
	)}

Replace this code block:

{isChatRoom && isAdminRoom && !isArchivedRoom && (
        <Text>
            <Text>{welcomeMessage.phrase1}</Text>
            {welcomeMessage.phrase2 !== undefined && <Text style={styles.textStrong}>{welcomeMessage.phrase2}</Text>}
            {welcomeMessage.phrase3 !== undefined && <Text>{welcomeMessage.phrase3}</Text>}
            {welcomeMessage.phrase4 !== undefined && <Text>{welcomeMessage.phrase4}</Text>}
        </Text>
    )}

with,

{isChatRoom && isAdminRoom && !isArchivedRoom && (
    <View>
        <Text>
            <Text>{welcomeMessage.phrase1}</Text>
            {welcomeMessage.phrase2 !== undefined && <Text style={styles.textStrong}>{welcomeMessage.phrase2}</Text>}
            {welcomeMessage.phrase3 !== undefined && <Text>{welcomeMessage.phrase3}</Text>}
            {welcomeMessage.phrase4 !== undefined && <Text>{welcomeMessage.phrase4}</Text>}
        </Text>
        <View style={[styles.mt3,styles.flexRow]}>
            <Button
                text="Register for Webinar"
                onPress={() => Linking.openURL('https://events.zoom.us/eo/Aif1I8qCi1GZ7KnLnd1vwGPmeukSRoPjFpyFAZ2udQWn0-B86e1Z~AggLXsr32QYFjq8BlYLZ5I06Dg')} 
                style={styles.button}
                shouldUseDefaultHover
                shouldBlendOpacity
            />
        </View>
    </View>
)}

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)

NA

Result

[github-actions]

⚠️ 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).

[hungvu193]

Yep, but also, this would replace talkToSalesButton. We wouldn't have both.

Doesn that mean we will replace talkToSalesButton with Register for webinar?

[samranahm]

@Expensify/design #60587 (comment)