[HOLD for payment 2024-02-01] [HOLD for payment 2024-01-25] [$500] Referral page - Animation on Referral page does not move

[izarutskaya]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number: 1.4.12-0
Reproducible in staging?: Y
Reproducible in production?: Y
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: Applause-Internal Team
Slack conversation: @

Action Performed:

1. Click on the FAB.
2. Click on "Request money"
3. Enter any amount.
4. Click on "Next".
5. Click on "Request money, get $250.".
6. Click "Learn more"

Expected Result:

Animation on Referral page should move

Actual Result:

Animation on Referral page does not move

Workaround:

Unknown

Platforms:

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

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6312397_1702513962704.Recording__1551.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~0192e339c759eff93d
• Upwork Job ID: 1735235226940305408
• Last Price Increase: 2023-12-14
• Automatic offers:
• akinwale | Reviewer | 28066892
• BhuvaneshPatil | Contributor | 28066893

[melvin-bot]

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

[melvin-bot]

Triggered auto assignment to @mallenexpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[melvin-bot]

Bug0 Triage Checklist (Main S/O)

• This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[melvin-bot]

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

[ZhenjaHorbach]

Proposal

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

Referral page - Animation on Referral page does not move

What is the root cause of that problem?

We use just icon
Not Lottie animation

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

We need to update components and instead icon use Lottie animation

App/src/pages/ReferralDetailsPage.js

Lines 65 to 71 in e81ed8f

	headerContent={
	<Icon
	src={PaymentHands}
	width={178}
	height={232}
	/>
	}

For example

 headerContent={ 
                <Lottie
                    source={LottieAnimations.Hands}
                    autoPlay
                    loop
                    style={styles.w100} // styles can be updated
                    webStyle={styles.w100}
                />
}

Or use the implementation from Preferences page

App/src/pages/settings/Preferences/PreferencesPage.js

Lines 50 to 55 in 5c0f3e4

	<IllustratedHeaderPageLayout
	title={translate('common.preferences')}
	onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS)}
	backgroundColor={theme.PAGE_THEMES[SCREENS.SETTINGS.PREFERENCES.ROOT].backgroundColor}
	illustration={LottieAnimations.PreferencesDJ}
	>

For example

        <IllustratedHeaderPageLayout
            title={translate('common.referral')}
            illustration={LottieAnimations.Hands}
            shouldShowBackButton
            backgroundColor={theme.PAGE_THEMES[SCREENS.RIGHT_MODAL.REFERRAL].backgroundColor}
        >

Plus I notice that this file is only place where we use PaymentHands from '@components/Icon/Illustrations';

So we can delete PaymentHands from our project

What alternative solutions did you explore? (Optional)

NA

[BhuvaneshPatil]

Proposal

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

The hands on referral page are not animated

What is the root cause of that problem?

We have used SVG icon instead of lottie animation.

App/src/pages/ReferralDetailsPage.js

Lines 63 to 74 in 5c0f3e4

	<HeaderPageLayout
	title={translate('common.referral')}
	headerContent={
	<Icon
	src={PaymentHands}
	width={178}
	height={232}
	/>
	}
	headerContainerStyles={[styles.staticHeaderImage, styles.justifyContentEnd]}
	backgroundColor={theme.PAGE_THEMES[SCREENS.RIGHT_MODAL.REFERRAL].backgroundColor}
	>

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

What alternative solutions did you explore? (Optional)

We shall use IllustratedHeaderPageLayout component with LottieAnimations.Hands to wrap the content, similar to what we have used in WorkspaceListPage
IllustratedHeaderPageLayout wraps the HeaderPageLayout so we shall consider the component that is built for specific purpose.

[melvin-bot]

@akinwale, @mallenexpensify Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!