Merge pull request #3 from allroundexperts/feature-expensiconx-confetti

feat: added confetti

package.json

@@ -86,6 +86,7 @@
     "pusher-js": "^7.0.6",
     "react": "18.1.0",
     "react-collapse": "^5.1.0",
+    "react-confetti": "^6.1.0",
     "react-content-loader": "^6.1.0",
     "react-dom": "18.1.0",
     "react-native": "npm:@expensify/react-native@0.70.4-alpha.2",

src/components/Confetti/index.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import ReactConfetti from 'react-confetti';
+import {Howl} from 'howler';
+import confettiSound from '../../../assets/sounds/confetti_pop.mp3';
+
+const propTypes = {
+    /** Triggers confetti */
+    trigger: PropTypes.bool,
+};
+
+const defaultProps = {
+    trigger: false,
+};
+
+const Confetti = (props) => {
+    const [toggle, setToggle] = React.useState(false);
+
+    React.useEffect(() => {
+        setToggle((prevToggle) => {
+            if (prevToggle) {
+                return true;
+            }
+            return props.trigger;
+        });
+    }, [props.trigger]);
+
+    React.useEffect(() => {
+        if (!toggle) {
+            return;
+        }
+        new Howl({src: confettiSound}).play();
+    }, [toggle]);
+
+    return toggle ? <ReactConfetti gravity={0.05} recycle={false} onConfettiComplete={() => setToggle(false)} /> : null;
+};
+
+Confetti.propTypes = propTypes;
+Confetti.defaultProps = defaultProps;
+Confetti.displayName = 'Confetti';
+
+export default Confetti;

src/components/Confetti/index.native.js

@@ -0,0 +1,6 @@
+
+const Confetti = () => null;
+
+Confetti.displayName = 'Confetti';
+
+export default Confetti;

src/pages/home/ReportScreen.js

@@ -6,6 +6,7 @@ import lodashGet from 'lodash/get';
 import _ from 'underscore';
 import {Freeze} from 'react-freeze';
 import {PortalHost} from '@gorhom/portal';
+import Confetti from '../../components/Confetti';
 import styles from '../../styles/styles';
 import ScreenWrapper from '../../components/ScreenWrapper';
 import HeaderView from './HeaderView';
@@ -204,6 +205,11 @@ class ReportScreen extends React.Component {
         // (which is shown, until all the actual views of the ReportScreen have been rendered)
         const animatePlaceholder = !freeze;
 
+        const lastMessage = _.find(this.props.reportActions, action => action.sequenceNumber === lodashGet(this.props.report, 'maxSequenceNumber'));
+        const triggerConfetti = lodashGet(this.props.report, 'lastReadTime') < lodashGet(lastMessage, 'created')
+            && lodashGet(this.props.report, 'lastMessageText').match(/^congrat(s|ulations?[.!]+)$/i)
+            && lodashGet(this.props.report, 'lastActorEmail') !== this.props.session.email;
+
         return (
             <ScreenWrapper
                 style={screenWrapperStyle}
@@ -269,6 +275,7 @@ class ReportScreen extends React.Component {
                         >
                             {(this.isReportReadyForDisplay() && !isLoadingInitialReportActions) && (
                                 <>
+                                    <Confetti trigger={triggerConfetti} />
                                     <ReportActionsView
                                         reportActions={this.props.reportActions}
                                         report={this.props.report}