Merge pull request #41561 from hungvu193/fix-41560

[Wave Collect] [Xero] Fix padding issue in ConnectionLayout
Expensify · May 6, 2024 · 0c2d513 · 0c2d513
2 parents 90b67a5 + b2804f4
commit 0c2d513
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 10 deletions.
diff --git a/src/components/ConnectionLayout.tsx b/src/components/ConnectionLayout.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import {View} from 'react-native';
+import type {StyleProp, TextStyle, ViewStyle} from 'react-native';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@libs/Navigation/Navigation';
@@ -15,23 +15,51 @@ import Text from './Text';
 type ConnectionLayoutProps = {
     /** Used to set the testID for tests */
     displayName: string;
+
     /** Header title for the connection */
     headerTitle: TranslationPaths;
+
     /** React nodes that will be shown */
     children?: React.ReactNode;
+
     /** Title of the connection component */
     title?: TranslationPaths;
+
     /** Subtitle of the connection */
     subtitle?: TranslationPaths;
+
     /** The current policyID */
     policyID: string;
+
     /** Defines which types of access should be verified */
     accessVariants?: PolicyAccessVariant[];
+
     /** The current feature name that the user tries to get access to */
     featureName?: PolicyFeatureName;
+
+    /** The content container style of Scrollview */
+    contentContainerStyle?: StyleProp<ViewStyle> | undefined;
+
+    /** Style of the title text */
+    titleStyle?: StyleProp<TextStyle> | undefined;
+
+    /** Style of the subtitle text */
+    subTitleStyle?: StyleProp<TextStyle> | undefined;
 };
 
-function ConnectionLayout({displayName, headerTitle, children, title, subtitle, policyID, accessVariants, featureName}: ConnectionLayoutProps) {
+function ConnectionLayout({
+    displayName,
+    headerTitle,
+    children,
+    title,
+    subtitle,
+    policyID,
+    accessVariants,
+    featureName,
+    contentContainerStyle,
+    titleStyle,
+    subTitleStyle,
+}: ConnectionLayoutProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
 
@@ -50,13 +78,9 @@ function ConnectionLayout({displayName, headerTitle, children, title, subtitle,
                     title={translate(headerTitle)}
                     onBackButtonPress={() => Navigation.goBack()}
                 />
-                <ScrollView contentContainerStyle={[styles.pb2, styles.ph5]}>
-                    {title && (
-                        <View style={[styles.pb2]}>
-                            <Text style={styles.pb5}>{translate(title)}</Text>
-                        </View>
-                    )}
-                    {subtitle && <Text style={styles.textLabelSupporting}>{translate(subtitle)}</Text>}
+                <ScrollView contentContainerStyle={contentContainerStyle}>
+                    {title && <Text style={[styles.pb5, titleStyle]}>{translate(title)}</Text>}
+                    {subtitle && <Text style={[styles.textLabelSupporting, subTitleStyle]}>{translate(subtitle)}</Text>}
                     {children}
                 </ScrollView>
             </ScreenWrapper>

diff --git a/src/pages/workspace/accounting/PolicyAccountingPage.tsx b/src/pages/workspace/accounting/PolicyAccountingPage.tsx
@@ -167,7 +167,8 @@ function PolicyAccountingPage({policy, connectionSyncProgress}: PolicyAccounting
                 interactive: false,
                 wrapperStyle: [styles.sectionMenuItemTopDescription],
                 shouldShowRightComponent: true,
-                title: integrationData?.title,
+                title: 'integrationData?.title',
+
                 description: isSyncInProgress
                     ? translate('workspace.accounting.connections.syncStageName', connectionSyncProgress.stageInProgress)
                     : translate('workspace.accounting.lastSync'),
@@ -201,6 +202,7 @@ function PolicyAccountingPage({policy, connectionSyncProgress}: PolicyAccounting
                           iconRight: Expensicons.ArrowRight,
                           title: currentXeroOrganization?.name,
                           wrapperStyle: [styles.sectionMenuItemTopDescription],
+                          titleStyle: styles.fontWeightNormal,
                           shouldShowRightIcon: tenants.length > 1,
                           shouldShowDescriptionOnTop: true,
                           onPress: () => {

diff --git a/src/pages/workspace/accounting/xero/advanced/XeroAdvancedPage.tsx b/src/pages/workspace/accounting/xero/advanced/XeroAdvancedPage.tsx
@@ -28,6 +28,7 @@ function XeroAdvancedPage({policy}: WithPolicyConnectionsProps) {
             accessVariants={[CONST.POLICY.ACCESS_VARIANTS.ADMIN, CONST.POLICY.ACCESS_VARIANTS.PAID]}
             policyID={policyID}
             featureName={CONST.POLICY.MORE_FEATURES.ARE_CONNECTIONS_ENABLED}
+            contentContainerStyle={[styles.pb2, styles.ph5]}
         >
             <ToggleSettingOptionRow
                 key={translate('workspace.xero.advancedConfig.autoSync')}

diff --git a/src/pages/workspace/accounting/xero/import/XeroCustomerConfigurationPage.tsx b/src/pages/workspace/accounting/xero/import/XeroCustomerConfigurationPage.tsx
@@ -29,6 +29,7 @@ function XeroCustomerConfigurationPage({policy}: WithPolicyProps) {
             accessVariants={[CONST.POLICY.ACCESS_VARIANTS.ADMIN]}
             policyID={policyID}
             featureName={CONST.POLICY.MORE_FEATURES.ARE_CONNECTIONS_ENABLED}
+            contentContainerStyle={[[styles.pb2, styles.ph5]]}
         >
             <View>
                 <View style={[styles.flexRow, styles.mb4, styles.alignItemsCenter, styles.justifyContentBetween]}>