Skip to content

Commit

Permalink
Merge pull request #38248 from ishpaul777/fix/issue-37403
Browse files Browse the repository at this point in the history 
fixes-37403 Workflows-If the first 2 options are enabled,cannot scroll to see the 3th option
  • Loading branch information
@luacmartins
luacmartins authored Mar 22, 2024
2 parents 7b2a76f + 7089a6c commit 4807318
Show file tree
Hide file tree
Showing 2 changed files with 124 additions and 127 deletions.
235 changes: 116 additions & 119 deletions src/pages/workspace/WorkspaceProfilePage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@ import * as Expensicons from '@components/Icon/Expensicons';
import * as Illustrations from '@components/Icon/Illustrations';
import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
import OfflineWithFeedback from '@components/OfflineWithFeedback';
import ScrollView from '@components/ScrollView';
import Section from '@components/Section';
import Text from '@components/Text';
import useActiveWorkspace from '@hooks/useActiveWorkspace';
Expand Down Expand Up @@ -119,133 +118,131 @@ function WorkspaceProfilePage({policy, currencyList = {}, route}: WorkSpaceProfi
icon={Illustrations.House}
>
{(hasVBA?: boolean) => (
<ScrollView>
<View style={[styles.flex1, styles.mt3, isSmallScreenWidth ? styles.workspaceSectionMobile : styles.workspaceSection]}>
<Section
isCentralPane
title=""
>
<Image
style={StyleSheet.flatten([styles.wAuto, styles.h68, imageStyle])}
source={illustrations.WorkspaceProfile}
resizeMode="cover"
/>
<AvatarWithImagePicker
onViewPhotoPress={() => Navigation.navigate(ROUTES.WORKSPACE_AVATAR.getRoute(policy?.id ?? ''))}
source={policy?.avatar ?? ''}
size={CONST.AVATAR_SIZE.XLARGE}
avatarStyle={styles.avatarXLarge}
enablePreview
DefaultAvatar={DefaultAvatar}
type={CONST.ICON_TYPE_WORKSPACE}
fallbackIcon={Expensicons.FallbackWorkspaceAvatar}
style={[
policy?.errorFields?.avatar ?? isSmallScreenWidth ? styles.mb1 : styles.mb3,
isSmallScreenWidth ? styles.mtn17 : styles.mtn20,
styles.alignItemsStart,
styles.sectionMenuItemTopDescription,
]}
editIconStyle={styles.smallEditIconWorkspace}
isUsingDefaultAvatar={!policy?.avatar ?? null}
onImageSelected={(file) => Policy.updateWorkspaceAvatar(policy?.id ?? '', file as File)}
onImageRemoved={() => Policy.deleteWorkspaceAvatar(policy?.id ?? '')}
editorMaskImage={Expensicons.ImageCropSquareMask}
pendingAction={policy?.pendingFields?.avatar}
errors={policy?.errorFields?.avatar}
onErrorClose={() => Policy.clearAvatarErrors(policy?.id ?? '')}
previewSource={UserUtils.getFullSizeAvatar(policy?.avatar ?? '')}
headerTitle={translate('workspace.common.workspaceAvatar')}
originalFileName={policy?.originalFileName}
<View style={[styles.flex1, styles.mt3, isSmallScreenWidth ? styles.workspaceSectionMobile : styles.workspaceSection]}>
<Section
isCentralPane
title=""
>
<Image
style={StyleSheet.flatten([styles.wAuto, styles.h68, imageStyle])}
source={illustrations.WorkspaceProfile}
resizeMode="cover"
/>
<AvatarWithImagePicker
onViewPhotoPress={() => Navigation.navigate(ROUTES.WORKSPACE_AVATAR.getRoute(policy?.id ?? ''))}
source={policy?.avatar ?? ''}
size={CONST.AVATAR_SIZE.XLARGE}
avatarStyle={styles.avatarXLarge}
enablePreview
DefaultAvatar={DefaultAvatar}
type={CONST.ICON_TYPE_WORKSPACE}
fallbackIcon={Expensicons.FallbackWorkspaceAvatar}
style={[
policy?.errorFields?.avatar ?? isSmallScreenWidth ? styles.mb1 : styles.mb3,
isSmallScreenWidth ? styles.mtn17 : styles.mtn20,
styles.alignItemsStart,
styles.sectionMenuItemTopDescription,
]}
editIconStyle={styles.smallEditIconWorkspace}
isUsingDefaultAvatar={!policy?.avatar ?? null}
onImageSelected={(file) => Policy.updateWorkspaceAvatar(policy?.id ?? '', file as File)}
onImageRemoved={() => Policy.deleteWorkspaceAvatar(policy?.id ?? '')}
editorMaskImage={Expensicons.ImageCropSquareMask}
pendingAction={policy?.pendingFields?.avatar}
errors={policy?.errorFields?.avatar}
onErrorClose={() => Policy.clearAvatarErrors(policy?.id ?? '')}
previewSource={UserUtils.getFullSizeAvatar(policy?.avatar ?? '')}
headerTitle={translate('workspace.common.workspaceAvatar')}
originalFileName={policy?.originalFileName}
disabled={readOnly}
disabledStyle={styles.cursorDefault}
errorRowStyles={styles.mt3}
/>
<OfflineWithFeedback pendingAction={policy?.pendingFields?.generalSettings}>
<MenuItemWithTopDescription
title={policyName}
titleStyle={styles.workspaceTitleStyle}
description={translate('workspace.editor.nameInputLabel')}
shouldShowRightIcon={!readOnly}
disabled={readOnly}
disabledStyle={styles.cursorDefault}
errorRowStyles={styles.mt3}
wrapperStyle={[styles.sectionMenuItemTopDescription, isSmallScreenWidth ? styles.mt3 : {}]}
onPress={onPressName}
shouldGreyOutWhenDisabled={false}
shouldUseDefaultCursorWhenDisabled
/>
<OfflineWithFeedback pendingAction={policy?.pendingFields?.generalSettings}>
</OfflineWithFeedback>
{(!StringUtils.isEmptyString(policy?.description ?? '') || !readOnly) && (
<OfflineWithFeedback
pendingAction={policy?.pendingFields?.description}
errors={ErrorUtils.getLatestErrorField(policy ?? {}, CONST.POLICY.COLLECTION_KEYS.DESCRIPTION)}
onClose={() => Policy.clearPolicyErrorField(policy?.id ?? '', CONST.POLICY.COLLECTION_KEYS.DESCRIPTION)}
>
<MenuItemWithTopDescription
title={policyName}
titleStyle={styles.workspaceTitleStyle}
description={translate('workspace.editor.nameInputLabel')}
title={policyDescription}
description={translate('workspace.editor.descriptionInputLabel')}
shouldShowRightIcon={!readOnly}
disabled={readOnly}
wrapperStyle={[styles.sectionMenuItemTopDescription, isSmallScreenWidth ? styles.mt3 : {}]}
onPress={onPressName}
wrapperStyle={styles.sectionMenuItemTopDescription}
onPress={onPressDescription}
shouldGreyOutWhenDisabled={false}
shouldUseDefaultCursorWhenDisabled
shouldRenderAsHTML
/>
</OfflineWithFeedback>
{(!StringUtils.isEmptyString(policy?.description ?? '') || !readOnly) && (
<OfflineWithFeedback
pendingAction={policy?.pendingFields?.description}
errors={ErrorUtils.getLatestErrorField(policy ?? {}, CONST.POLICY.COLLECTION_KEYS.DESCRIPTION)}
onClose={() => Policy.clearPolicyErrorField(policy?.id ?? '', CONST.POLICY.COLLECTION_KEYS.DESCRIPTION)}
>
<MenuItemWithTopDescription
title={policyDescription}
description={translate('workspace.editor.descriptionInputLabel')}
shouldShowRightIcon={!readOnly}
disabled={readOnly}
wrapperStyle={styles.sectionMenuItemTopDescription}
onPress={onPressDescription}
shouldGreyOutWhenDisabled={false}
shouldUseDefaultCursorWhenDisabled
shouldRenderAsHTML
/>
</OfflineWithFeedback>
)}
<OfflineWithFeedback
pendingAction={policy?.pendingFields?.generalSettings}
errors={ErrorUtils.getLatestErrorField(policy ?? {}, CONST.POLICY.COLLECTION_KEYS.GENERAL_SETTINGS)}
onClose={() => Policy.clearPolicyErrorField(policy?.id ?? '', CONST.POLICY.COLLECTION_KEYS.GENERAL_SETTINGS)}
errorRowStyles={[styles.mt2]}
>
<View>
<MenuItemWithTopDescription
title={formattedCurrency}
description={translate('workspace.editor.currencyInputLabel')}
shouldShowRightIcon={!readOnly}
disabled={hasVBA ? true : readOnly}
wrapperStyle={styles.sectionMenuItemTopDescription}
onPress={onPressCurrency}
shouldGreyOutWhenDisabled={false}
shouldUseDefaultCursorWhenDisabled
/>
<Text style={[styles.textLabel, styles.colorMuted, styles.mt1, styles.mh5, styles.sectionMenuItemTopDescription]}>
{hasVBA ? translate('workspace.editor.currencyInputDisabledText') : translate('workspace.editor.currencyInputHelpText')}
</Text>
</View>
</OfflineWithFeedback>
{!readOnly && (
<View style={[styles.flexRow, styles.mt6, styles.mnw120]}>
<Button
accessibilityLabel={translate('common.share')}
text={translate('common.share')}
onPress={onPressShare}
medium
icon={Expensicons.QrCode}
/>
<Button
accessibilityLabel={translate('common.delete')}
text={translate('common.delete')}
style={[styles.ml2]}
onPress={() => setIsDeleteModalOpen(true)}
medium
icon={Expensicons.Trashcan}
/>
</View>
)}
</Section>
<ConfirmModal
title={translate('common.delete')}
isVisible={isDeleteModalOpen}
onConfirm={confirmDeleteAndHideModal}
onCancel={() => setIsDeleteModalOpen(false)}
prompt={translate('workspace.common.deleteConfirmation')}
confirmText={translate('common.delete')}
cancelText={translate('common.cancel')}
danger
/>
</View>
</ScrollView>
)}
<OfflineWithFeedback
pendingAction={policy?.pendingFields?.generalSettings}
errors={ErrorUtils.getLatestErrorField(policy ?? {}, CONST.POLICY.COLLECTION_KEYS.GENERAL_SETTINGS)}
onClose={() => Policy.clearPolicyErrorField(policy?.id ?? '', CONST.POLICY.COLLECTION_KEYS.GENERAL_SETTINGS)}
errorRowStyles={[styles.mt2]}
>
<View>
<MenuItemWithTopDescription
title={formattedCurrency}
description={translate('workspace.editor.currencyInputLabel')}
shouldShowRightIcon={!readOnly}
disabled={hasVBA ? true : readOnly}
wrapperStyle={styles.sectionMenuItemTopDescription}
onPress={onPressCurrency}
shouldGreyOutWhenDisabled={false}
shouldUseDefaultCursorWhenDisabled
/>
<Text style={[styles.textLabel, styles.colorMuted, styles.mt1, styles.mh5, styles.sectionMenuItemTopDescription]}>
{hasVBA ? translate('workspace.editor.currencyInputDisabledText') : translate('workspace.editor.currencyInputHelpText')}
</Text>
</View>
</OfflineWithFeedback>
{!readOnly && (
<View style={[styles.flexRow, styles.mt6, styles.mnw120]}>
<Button
accessibilityLabel={translate('common.share')}
text={translate('common.share')}
onPress={onPressShare}
medium
icon={Expensicons.QrCode}
/>
<Button
accessibilityLabel={translate('common.delete')}
text={translate('common.delete')}
style={[styles.ml2]}
onPress={() => setIsDeleteModalOpen(true)}
medium
icon={Expensicons.Trashcan}
/>
</View>
)}
</Section>
<ConfirmModal
title={translate('common.delete')}
isVisible={isDeleteModalOpen}
onConfirm={confirmDeleteAndHideModal}
onCancel={() => setIsDeleteModalOpen(false)}
prompt={translate('workspace.common.deleteConfirmation')}
confirmText={translate('common.delete')}
cancelText={translate('common.cancel')}
danger
/>
</View>
)}
</WorkspacePageWithSections>
);
Expand Down
16 changes: 8 additions & 8 deletions src/pages/workspace/workflows/WorkspaceWorkflowsPage.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import type {StackScreenProps} from '@react-navigation/stack';
import React, {useCallback, useEffect, useMemo, useState} from 'react';
import {FlatList, View} from 'react-native';
import {View} from 'react-native';
import type {OnyxEntry} from 'react-native-onyx';
import {withOnyx} from 'react-native-onyx';
import ConfirmModal from '@components/ConfirmModal';
Expand Down Expand Up @@ -243,8 +243,11 @@ function WorkspaceWorkflowsPage({policy, betas, route, reimbursementAccount, ses
session?.accountID,
]);

const renderOptionItem = ({item}: {item: ToggleSettingOptionRowProps}) => (
<View style={styles.mt7}>
const renderOptionItem = (item: ToggleSettingOptionRowProps, index: number) => (
<View
style={styles.mt7}
key={`toggleSettingOptionItem-${index}`}
>
<ToggleSettingOptionRow
icon={item.icon}
title={item.title}
Expand Down Expand Up @@ -277,6 +280,7 @@ function WorkspaceWorkflowsPage({policy, betas, route, reimbursementAccount, ses
shouldShowNotFoundPage={!isPaidGroupPolicy || !isPolicyAdmin}
shouldSkipVBBACall
isLoading={isLoading}
shouldUseScrollView
>
<View style={[styles.mt3, styles.textStrong, isSmallScreenWidth ? styles.workspaceSectionMobile : styles.workspaceSection]}>
<Section
Expand All @@ -286,11 +290,7 @@ function WorkspaceWorkflowsPage({policy, betas, route, reimbursementAccount, ses
>
<View>
<Text style={[styles.mt3, styles.textSupporting]}>{translate('workflowsPage.workflowDescription')}</Text>
<FlatList
data={optionItems}
renderItem={renderOptionItem}
keyExtractor={(item: ToggleSettingOptionRowProps) => item.title}
/>
{optionItems.map(renderOptionItem)}
<ConfirmModal
title={translate('workspace.bankAccount.workspaceCurrency')}
isVisible={isCurrencyModalOpen}
Expand Down

0 comments on commit 4807318

Please sign in to comment.