finish implementing qr share card

ojasjadhav2 · May 10, 2023 · fdd3473 · fdd3473
1 parent fe000c0
commit fdd3473
Show file tree

Hide file tree

Showing 5 changed files with 69 additions and 24 deletions.
diff --git a/assets/images/avatars/room.png b/assets/images/avatars/room.png
diff --git a/assets/images/expensify_wordmark_white.svg b/assets/images/expensify_wordmark_white.svg
diff --git a/src/components/QRShare.js b/src/components/QRShare.js
@@ -9,6 +9,7 @@ import Text from './Text';
 import withWindowDimensions, {windowDimensionsPropTypes} from './withWindowDimensions';
 import compose from '../libs/compose';
 import variables from '../styles/variables';
+import ExpensifyWordmark from '../../assets/images/expensify-wordmark.svg';
 
 const propTypes = {
     type: PropTypes.string.isRequired,
@@ -32,33 +33,55 @@ class QRShare extends React.Component {
     constructor(props) {
         super(props);
 
-        this.size = (this.props.isSmallScreenWidth ? variables.sideBarWidth : Dimensions.get('window').width) - 100;
+        const defaultQrCodeSize = this.props.isSmallScreenWidth ? (Dimensions.get('window').width) - 75 : variables.sideBarWidth;
+
+        this.state = {
+            qrCodeSize: defaultQrCodeSize,
+        };
 
         this.url = this.props.type === 'profile' ? `https://new.expensify.com/details?login=${this.props.value}` : `https://new.expensify.com/r/${this.props.value}`;
+
+        this.onLayout = this.onLayout.bind(this);
+    }
+
+    onLayout = (event) => {
+        this.setState({
+            qrCodeSize: event.nativeEvent.layout.width - 64,
+        });
     }
 
     render() {
         return (
-            <View style={styles.shareCodeContainer}>
-                <Text family="EXP_NEUE_BOLD" fontSize={30} style={{marginBottom: 20}} color={defaultTheme.borderFocus}>Expensify</Text>
-
+            <View style={styles.shareCodeContainer} onLayout={this.onLayout}>
+                <View style={{
+                    alignSelf: 'stretch',
+                    height: 27,
+                    marginBottom: 20,
+                }}
+                >
+                    <ExpensifyWordmark
+                        fill={defaultTheme.borderFocus}
+                        width="100%"
+                        height="100%"
+                        resizeMode="fill"
+                    />
+                </View>
                 <QRCodeLibrary
                     value={this.url}
                     logo={this.props.logo}
                     getRef={c => (this.svg = c)}
                     logoBackgroundColor="transparent"
-                    logoSize={this.size * 0.3}
-                    logoBorderRadius={this.size}
-                    logoMargin={200}
-                    size={this.size}
+                    logoSize={this.state.qrCodeSize * 0.3}
+                    logoBorderRadius={this.state.qrCodeSize}
+                    size={this.state.qrCodeSize}
                     backgroundColor={defaultTheme.highlightBG}
                     color={defaultTheme.text}
                 />
 
-                <Text family="EXP_NEW_KANSAS_MEDIUM" fontSize={25} style={{marginTop: 20}}>{this.props.title}</Text>
+                <Text family="EXP_NEW_KANSAS_MEDIUM" fontSize={22} style={{marginTop: 15}}>{this.props.title}</Text>
 
                 {this.props.subtitle && (
-                <Text family="EXP_NEUE_BOLD" fontSize={15} style={{marginBottom: 20}}>{this.props.subtitle}</Text>
+                <Text family="EXP_NEUE_BOLD" fontSize={13} style={{marginTop: 4}}>{this.props.subtitle}</Text>
                 )}
             </View>
         );

diff --git a/src/pages/ShareCodePage.js b/src/pages/ShareCodePage.js
@@ -1,7 +1,6 @@
 import React from 'react';
 import {View} from 'react-native';
 import PropTypes from 'prop-types';
-import {withOnyx} from 'react-native-onyx';
 import ScreenWrapper from '../components/ScreenWrapper';
 import HeaderWithCloseButton from '../components/HeaderWithCloseButton';
 import Navigation from '../libs/Navigation/Navigation';
@@ -11,8 +10,8 @@ import compose from '../libs/compose';
 import reportPropTypes from './reportPropTypes';
 import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsDefaultProps, withCurrentUserPersonalDetailsPropTypes} from '../components/withCurrentUserPersonalDetails';
 import styles from '../styles/styles';
-import roomAvatar from '../../assets/images/avatars/room.svg';
-import ONYXKEYS from '../ONYXKEYS';
+import roomAvatar from '../../assets/images/avatars/room.png';
+import * as ReportUtils from '../libs/ReportUtils';
 
 const propTypes = {
     /** Navigation route context info provided by react navigation */
@@ -42,6 +41,8 @@ class ShareCodePage extends React.Component {
         const reportId = this.props.route?.params?.reportID;
         const isReport = this.props.report != null && this.props.report.reportID != null;
 
+        console.log(this.props.report);
+
         return (
             <ScreenWrapper>
                 <HeaderWithCloseButton
@@ -56,7 +57,7 @@ class ShareCodePage extends React.Component {
                         type={isReport ? 'report' : 'profile'}
                         value={isReport ? reportId : this.props.session.email}
                         title={isReport ? this.props.report.reportName : this.props.currentUserPersonalDetails.displayName}
-                        subtitle={isReport ? undefined : this.props.session.email}
+                        subtitle={isReport ? ReportUtils.getPolicyName(this.props.report) : this.props.session.email}
                         logo={isReport ? roomAvatar : this.props.currentUserPersonalDetails.avatar}
                         download={() => null}
                     />
@@ -71,11 +72,5 @@ ShareCodePage.defaultProps = defaultProps;
 
 export default compose(
     withLocalize,
-    withOnyx({
-        report: {
-            // eslint-disable-next-line es/no-optional-chaining
-            key: ({route}) => (route.params?.reportId != null ? `${ONYXKEYS.COLLECTION.REPORT}${route.params.reportID}` : undefined),
-        },
-    }),
     withCurrentUserPersonalDetails,
 )(ShareCodePage);
diff --git a/src/styles/styles.js b/src/styles/styles.js
@@ -3194,17 +3194,18 @@ const styles = {
     },
 
     shareCodePage: {
-        alignItems: 'center',
+        paddingHorizontal: 38.5,
     },
 
     shareCodeContainer: {
+        width: '100%',
         alignItems: 'center',
-        paddingHorizontal: 30,
+        paddingHorizontal: 32,
         paddingVertical: 20,
-        marginHorizontal: 30,
         borderRadius: 20,
+        overflow: 'hidden',
         borderColor: themeColors.borderFocus,
-        borderWidth: 3,
+        borderWidth: 2,
         backgroundColor: themeColors.highlightBG,
     },
 };