Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

#45949 & #45950 Divide workflows page into three sections & Update payment section with bank icon #46020

Merged
merged 19 commits into from
Jul 30, 2024
Merged

#45949 & #45950 Divide workflows page into three sections & Update payment section with bank icon #46020

Changes from 3 commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
c4fee80
splitting workflows into separate cards
Guccio163 Jul 23, 2024
6403f79
Merge branch 'main' of github.com:software-mansion-labs/expensify-app…
Guccio163 Jul 23, 2024
e8b74b8
subMenuItems ready, without payments
Guccio163 Jul 24, 2024
fe10175
ready for draft #45949 and #45950
Guccio163 Jul 26, 2024
9a3e8a7
Merge branch 'main' of github.com:software-mansion-labs/expensify-app…
Guccio163 Jul 26, 2024
2e506f1
cleaning up ui after merge
Guccio163 Jul 26, 2024
3f5b7fd
cleaning comments
Guccio163 Jul 26, 2024
0996e02
fixing minor bugs
Guccio163 Jul 26, 2024
0cc80e6
fixing minor bugs 2
Guccio163 Jul 26, 2024
16858cf
fix uneven padding
Guccio163 Jul 26, 2024
28bf676
Merge branch 'main' of github.com:software-mansion-labs/expensify-app…
Guccio163 Jul 27, 2024
2f75884
fix pods
Guccio163 Jul 27, 2024
a360370
fix empty fragment
Guccio163 Jul 27, 2024
01c162b
Merge branch 'Guccio163/45949-divide_workflows' of github.com:softwar…
Guccio163 Jul 27, 2024
1a26c35
Merge branch 'main' of github.com:software-mansion-labs/expensify-app…
Guccio163 Jul 29, 2024
76cd83e
changable description style in ToggleSettingsOptionRow
Guccio163 Jul 29, 2024
1302a62
lint fix
Guccio163 Jul 29, 2024
8804588
fix spacing, fontSize consulted
Guccio163 Jul 29, 2024
3a4acd2
approved translations
Guccio163 Jul 30, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
80 changes: 35 additions & 45 deletions src/pages/workspace/workflows/WorkspaceWorkflowsPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,9 @@ import {withOnyx} from 'react-native-onyx';
import ConfirmModal from '@components/ConfirmModal';
import * as Illustrations from '@components/Icon/Illustrations';
import MenuItem from '@components/MenuItem';
import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
import OfflineWithFeedback from '@components/OfflineWithFeedback';
import Section from '@components/Section';
import Text from '@components/Text';
import useLocalize from '@hooks/useLocalize';
import useNetwork from '@hooks/useNetwork';
import useTheme from '@hooks/useTheme';
Expand Down Expand Up @@ -51,7 +51,7 @@ function WorkspaceWorkflowsPage({policy, betas, route}: WorkspaceWorkflowsPagePr

const policyApproverEmail = policy?.approver;
const policyApproverName = useMemo(() => PersonalDetailsUtils.getPersonalDetailByEmail(policyApproverEmail ?? '')?.displayName ?? policyApproverEmail, [policyApproverEmail]);
const containerStyle = useMemo(() => [styles.ph8, styles.mhn8, styles.ml11, styles.pv3, styles.pr0, styles.pl4, styles.mr0, styles.widthAuto, styles.mt4], [styles]);
const containerStyle = useMemo(() => [styles.ph8, styles.mhn5, styles.ml0, styles.pv3, styles.pr0, styles.pl2, styles.mr0, styles.widthAuto, styles.mt4, styles.pb0], [styles]);
const canUseDelayedSubmission = Permissions.canUseWorkflowsDelayedSubmission(betas);
const [isCurrencyModalOpen, setIsCurrencyModalOpen] = useState(false);

Expand Down Expand Up @@ -111,20 +111,19 @@ function WorkspaceWorkflowsPage({policy, betas, route}: WorkspaceWorkflowsPagePr
);
},
subMenuItems: (
<MenuItem
title={translate('workflowsPage.submissionFrequency')}
titleStyle={styles.textLabelSupportingNormal}
descriptionTextStyle={styles.textNormalThemeText}
onPress={onPressAutoReportingFrequency}
// Instant submit is the equivalent of delayed submissions being turned off, so we show the feature as disabled if the frequency is instant
description={
<MenuItemWithTopDescription
title={
getAutoReportingFrequencyDisplayNames(preferredLocale)[
(PolicyUtils.getCorrectedAutoReportingFrequency(policy) as AutoReportingFrequencyKey) ?? CONST.POLICY.AUTO_REPORTING_FREQUENCIES.WEEKLY
]
}
titleStyle={styles.textNormalThemeText}
descriptionTextStyle={styles.textLabelSupportingNormal}
onPress={onPressAutoReportingFrequency}
// Instant submit is the equivalent of delayed submissions being turned off, so we show the feature as disabled if the frequency is instant
description={translate('workflowsPage.submissionFrequency')}
shouldShowRightIcon
wrapperStyle={containerStyle}
hoverAndPressStyle={[styles.mr0, styles.br2]}
wrapperStyle={[styles.sectionMenuItemTopDescription, styles.mt3, styles.mbn3]}
brickRoadIndicator={hasDelayedSubmissionError ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined}
/>
),
Expand All @@ -144,15 +143,14 @@ function WorkspaceWorkflowsPage({policy, betas, route}: WorkspaceWorkflowsPagePr
Policy.setWorkspaceApprovalMode(route.params.policyID, policy?.owner ?? '', isEnabled ? CONST.POLICY.APPROVAL_MODE.BASIC : CONST.POLICY.APPROVAL_MODE.OPTIONAL);
},
subMenuItems: (
<MenuItem
title={translate('workflowsPage.approver')}
titleStyle={styles.textLabelSupportingNormal}
descriptionTextStyle={styles.textNormalThemeText}
description={policyApproverName ?? ''}
<MenuItemWithTopDescription
title={policyApproverName ?? ''}
titleStyle={styles.textNormalThemeText}
descriptionTextStyle={styles.textLabelSupportingNormal}
description={translate('workflowsPage.approver')}
onPress={() => Navigation.navigate(ROUTES.WORKSPACE_WORKFLOWS_APPROVER.getRoute(route.params.policyID))}
shouldShowRightIcon
wrapperStyle={containerStyle}
hoverAndPressStyle={[styles.mr0, styles.br2]}
wrapperStyle={[styles.sectionMenuItemTopDescription, styles.mt3, styles.mbn3]}
brickRoadIndicator={hasApprovalError ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined}
/>
),
Expand Down Expand Up @@ -252,15 +250,14 @@ function WorkspaceWorkflowsPage({policy, betas, route}: WorkspaceWorkflowsPagePr
theme,
]);

const renderOptionItem = (item: ToggleSettingOptionRowProps, index: number) => (
<View
style={styles.mt7}
key={`toggleSettingOptionItem-${index}`}
const renderOptionItem = (item: ToggleSettingOptionRowProps) => (
<Section
containerStyles={isSmallScreenWidth ? styles.p5 : styles.p8}
titleStyles={styles.accountSettingsSectionTitle}
>
<ToggleSettingOptionRow
icon={item.icon}
title={item.title}
titleStyle={styles.textStrong}
titleStyle={[styles.textHeadline, styles.cardSectionTitle, styles.accountSettingsSectionTitle]}
subtitle={item.subtitle}
switchAccessibilityLabel={item.switchAccessibilityLabel}
onToggle={item.onToggle}
Expand All @@ -270,7 +267,7 @@ function WorkspaceWorkflowsPage({policy, betas, route}: WorkspaceWorkflowsPagePr
errors={item.errors}
onCloseError={item.onCloseError}
/>
</View>
</Section>
);

const isPaidGroupPolicy = PolicyUtils.isPaidGroupPolicy(policy);
Expand All @@ -293,26 +290,19 @@ function WorkspaceWorkflowsPage({policy, betas, route}: WorkspaceWorkflowsPagePr
shouldUseScrollView
>
<View style={[styles.mt3, styles.textStrong, isSmallScreenWidth ? styles.workspaceSectionMobile : styles.workspaceSection]}>
<Section
title={translate('workflowsPage.workflowTitle')}
titleStyles={styles.textStrong}
containerStyles={isSmallScreenWidth ? styles.p5 : styles.p8}
>
<View>
<Text style={[styles.mt3, styles.textSupporting]}>{translate('workflowsPage.workflowDescription')}</Text>
{optionItems.map(renderOptionItem)}
<ConfirmModal
title={translate('workspace.bankAccount.workspaceCurrency')}
isVisible={isCurrencyModalOpen}
onConfirm={confirmCurrencyChangeAndHideModal}
onCancel={() => setIsCurrencyModalOpen(false)}
prompt={translate('workspace.bankAccount.updateCurrencyPrompt')}
confirmText={translate('workspace.bankAccount.updateToUSD')}
cancelText={translate('common.cancel')}
danger
/>
</View>
</Section>
<View>
{optionItems.map(renderOptionItem)}
<ConfirmModal
title={translate('workspace.bankAccount.workspaceCurrency')}
isVisible={isCurrencyModalOpen}
onConfirm={confirmCurrencyChangeAndHideModal}
onCancel={() => setIsCurrencyModalOpen(false)}
prompt={translate('workspace.bankAccount.updateCurrencyPrompt')}
confirmText={translate('workspace.bankAccount.updateToUSD')}
cancelText={translate('common.cancel')}
danger
/>
</View>
</View>
</WorkspacePageWithSections>
</AccessOrNotFoundWrapper>
Expand Down
Loading