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.

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

#45951 & #45958: Implement <ApprovalWorkflowSection /> component and Enhance toLocaleOrdinal to support string ordinals #46562

Merged
Show file tree
Hide file tree
Changes from 17 commits
Commits
Show all changes
29 commits
Select commit Hold shift + click to select a range
517bf4d
Update readme
blazejkustra Jul 27, 2024
650eda9
wip
Guccio163 Jul 30, 2024
9e72afd
Merge branch 'Guccio163/45949-divide_workflows' of github.com:softwar…
Guccio163 Jul 31, 2024
c91b34a
section ready, subsections not working
Guccio163 Jul 31, 2024
dd28d1b
useMemo and ts fix
Guccio163 Jul 31, 2024
581997b
Merge branch 'main' of github.com:software-mansion-labs/expensify-app…
Guccio163 Jul 31, 2024
27cebe1
add navigation to approval edit
Guccio163 Jul 31, 2024
822b5c5
approverName and menuItem propagation problem
Guccio163 Jul 31, 2024
c83040a
Merge branch 'approval-workflows/toLocaleOrdinal' into Guccio163/4595…
Guccio163 Jul 31, 2024
ab4c82f
toLocaleOrdinal fix, linking to approval section
Guccio163 Jul 31, 2024
3df09af
Merge branch 'main' of github.com:software-mansion-labs/expensify-app…
Guccio163 Jul 31, 2024
7d6b856
Temp deleted, sections' props added
Guccio163 Jul 31, 2024
42c370f
undo react-native.d.ts change
Guccio163 Jul 31, 2024
d8291fd
undo package.json
Guccio163 Jul 31, 2024
9659c61
toLocale fix2, updates
Guccio163 Jul 31, 2024
741cd37
unclickable MenuItem fixed
Guccio163 Jul 31, 2024
ca527d1
approver naming fixed
Guccio163 Jul 31, 2024
f4ea901
Merge branch 'main' into Guccio163/45951_implementApprovalWorkflowSec…
blazejkustra Jul 31, 2024
acf2425
Merge branch 'main' into Guccio163/45951_implementApprovalWorkflowSec…
blazejkustra Aug 1, 2024
aa3d60c
Fix design issues
blazejkustra Aug 1, 2024
6564afe
Update user-check icon
blazejkustra Aug 1, 2024
22df581
Change the icon to the correct one
blazejkustra Aug 1, 2024
a639123
Merge branch 'main' into Guccio163/45951_implementApprovalWorkflowSec…
blazejkustra Aug 2, 2024
fc835a1
Move vertical line styles
blazejkustra Aug 2, 2024
27e14eb
Merge branch 'main' into Guccio163/45951_implementApprovalWorkflowSec…
blazejkustra Aug 2, 2024
04f7776
toLocaleString refactor
Guccio163 Aug 5, 2024
88d6894
Merge branch 'main' of github.com:software-mansion-labs/expensify-app…
Guccio163 Aug 5, 2024
5478c6e
safeguard approvers' keys
Guccio163 Aug 5, 2024
6fb0b6e
props annotations
Guccio163 Aug 5, 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
9 changes: 9 additions & 0 deletions assets/images/user-check.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
100 changes: 100 additions & 0 deletions src/components/ApprovalWorkflowSection.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,100 @@
import React, {useCallback} from 'react';
import {View} from 'react-native';
import useLocalize from '@hooks/useLocalize';
import useTheme from '@hooks/useTheme';
import useThemeStyles from '@hooks/useThemeStyles';
import Navigation from '@libs/Navigation/Navigation';
import ROUTES from '@src/ROUTES';
import type ApprovalWorkflow from '@src/types/onyx/ApprovalWorkflow';
import Icon from './Icon';
import * as Expensicons from './Icon/Expensicons';
import MenuItem from './MenuItem';
import PressableWithoutFeedback from './Pressable/PressableWithoutFeedback';
import Text from './Text';

type ApprovalWorkflowSectionProps = {
approvalWorkflow: ApprovalWorkflow;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please add /** */ style comments to each prop

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just added, please take a quick look if they're okay :)

policyId?: string;
};

function ApprovalWorkflowSection({approvalWorkflow, policyId}: ApprovalWorkflowSectionProps) {
const styles = useThemeStyles();
const theme = useTheme();
const {translate, toLocaleOrdinal} = useLocalize();
const openApprovalsEdit = useCallback(
() => Navigation.navigate(ROUTES.WORKSPACE_WORKFLOWS_APPROVALS_EDIT.getRoute(policyId ?? '', approvalWorkflow.approvers[0].email)),
[approvalWorkflow.approvers, policyId],
);
const approverTitle = useCallback(
(index: number) =>
approvalWorkflow.approvers.length > 1 ? `${toLocaleOrdinal(index + 1, true)} ${translate('workflowsPage.approver').toLowerCase()}` : `${translate('workflowsPage.approver')}`,
[approvalWorkflow.approvers.length, toLocaleOrdinal, translate],
);

return (
<PressableWithoutFeedback
accessibilityRole="button"
style={[styles.border, styles.p4, styles.flexRow, styles.justifyContentBetween, styles.mt6, styles.mbn3]}
onPress={openApprovalsEdit}
accessibilityLabel={translate('workflowsPage.addApprovalsTitle')}
>
<View style={[styles.flex1]}>
{approvalWorkflow.isDefault && (
<View style={[styles.flexRow, styles.mb4, styles.alignItemsCenter, styles.pb1, styles.pt1]}>
<Icon
src={Expensicons.Lightbulb}
fill={theme.icon}
additionalStyles={styles.mr2}
small
/>
<Text
style={[styles.textLabelSupportingNormal]}
suppressHighlighting
>
{translate('workflowsPage.addApprovalTip')}
</Text>
</View>
)}
<MenuItem
title={translate('workflowsExpensesFromPage.title')}
style={styles.p0}
titleStyle={styles.textLabelSupportingNormal}
descriptionTextStyle={styles.textNormalThemeText}
description={approvalWorkflow.isDefault ? translate('workspace.common.everyone') : approvalWorkflow.members.map((m) => m.displayName).join(', ')}
icon={Expensicons.Users}
iconHeight={20}
iconWidth={20}
iconFill={theme.icon}
onPress={openApprovalsEdit}
shouldRemoveBackground
/>

{approvalWorkflow.approvers.map((approver, index) => (
<View key={approver.email}>
<View style={{height: 16, width: 1, backgroundColor: theme.border, marginLeft: 19}} />
Copy link
Contributor

@shubham1206agra shubham1206agra Aug 2, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@blazejkustra Can you please explain me the choice of style here (especially marginLeft)? And can we use styles here.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These are the styles for the vertical line from the screenshot:
image

I moved the styles as requested 👌

Copy link
Contributor

@blazejkustra blazejkustra Aug 2, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

marginLeft is set to 19 to match the designs @shubham1206agra:
image

<MenuItem
title={approverTitle(index)}
style={styles.p0}
titleStyle={styles.textLabelSupportingNormal}
descriptionTextStyle={styles.textNormalThemeText}
description={approver.displayName}
icon={Expensicons.UserCheck}
iconHeight={20}
iconWidth={20}
iconFill={theme.icon}
onPress={openApprovalsEdit}
shouldRemoveBackground
/>
</View>
))}
</View>
<Icon
src={Expensicons.ArrowRight}
fill={theme.icon}
additionalStyles={[styles.alignSelfCenter]}
/>
</PressableWithoutFeedback>
);
}

export default ApprovalWorkflowSection;
2 changes: 2 additions & 0 deletions src/components/Icon/Expensicons.ts
Original file line number Diff line number Diff line change
Expand Up @@ -176,6 +176,7 @@ import Trashcan from '@assets/images/trashcan.svg';
import Unlock from '@assets/images/unlock.svg';
import UploadAlt from '@assets/images/upload-alt.svg';
import Upload from '@assets/images/upload.svg';
import UserCheck from '@assets/images/user-check.svg';
import User from '@assets/images/user.svg';
import Users from '@assets/images/users.svg';
import VolumeHigh from '@assets/images/volume-high.svg';
Expand Down Expand Up @@ -347,6 +348,7 @@ export {
Upload,
UploadAlt,
User,
UserCheck,
Users,
VolumeHigh,
VolumeLow,
Expand Down
9 changes: 7 additions & 2 deletions src/components/LocaleContextProvider.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ type LocaleContextProps = {
toLocaleDigit: (digit: string) => string;

/** Formats a number into its localized ordinal representation */
toLocaleOrdinal: (number: number) => string;
toLocaleOrdinal: (number: number, returnWords?: boolean) => string;

/** Gets the standard digit corresponding to a locale digit */
fromLocaleDigit: (digit: string) => string;
Expand Down Expand Up @@ -101,7 +101,12 @@ function LocaleContextProvider({preferredLocale, currentUserPersonalDetails, chi

const toLocaleDigit = useMemo<LocaleContextProps['toLocaleDigit']>(() => (digit) => LocaleDigitUtils.toLocaleDigit(locale, digit), [locale]);

const toLocaleOrdinal = useMemo<LocaleContextProps['toLocaleOrdinal']>(() => (number) => LocaleDigitUtils.toLocaleOrdinal(locale, number), [locale]);
const toLocaleOrdinal = useMemo<LocaleContextProps['toLocaleOrdinal']>(
() =>
(number, returnWords = false) =>
LocaleDigitUtils.toLocaleOrdinal(locale, number, returnWords),
[locale],
);

const fromLocaleDigit = useMemo<LocaleContextProps['fromLocaleDigit']>(() => (localeDigit) => LocaleDigitUtils.fromLocaleDigit(locale, localeDigit), [locale]);

Expand Down
9 changes: 7 additions & 2 deletions src/components/MenuItem.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -242,6 +242,9 @@ type MenuItemBaseProps = {
/** Should we grey out the menu item when it is disabled? */
shouldGreyOutWhenDisabled?: boolean;

/** Should we remove the background color of the menu item */
shouldRemoveBackground?: boolean;

/** Should we use default cursor for disabled content */
shouldUseDefaultCursorWhenDisabled?: boolean;

Expand Down Expand Up @@ -377,6 +380,7 @@ function MenuItem(
shouldRenderAsHTML = false,
shouldEscapeText = undefined,
shouldGreyOutWhenDisabled = true,
shouldRemoveBackground = false,
shouldUseDefaultCursorWhenDisabled = false,
shouldShowLoadingSpinnerIcon = false,
isAnonymousAction = false,
Expand Down Expand Up @@ -537,11 +541,12 @@ function MenuItem(
containerStyle,
combinedStyle,
!interactive && styles.cursorDefault,
StyleUtils.getButtonBackgroundColorStyle(getButtonState(focused || isHovered, pressed, success, disabled, interactive), true),
!shouldRemoveBackground &&
StyleUtils.getButtonBackgroundColorStyle(getButtonState(focused || isHovered, pressed, success, disabled, interactive), true),
...(Array.isArray(wrapperStyle) ? wrapperStyle : [wrapperStyle]),
!focused && (isHovered || pressed) && hoverAndPressStyle,
shouldGreyOutWhenDisabled && disabled && styles.buttonOpacityDisabled,
isHovered && interactive && !focused && !pressed && styles.hoveredComponentBG,
isHovered && interactive && !focused && !pressed && !shouldRemoveBackground && styles.hoveredComponentBG,
] as StyleProp<ViewStyle>
}
disabledStyle={shouldUseDefaultCursorWhenDisabled && [styles.cursorDefault]}
Expand Down
14 changes: 14 additions & 0 deletions src/languages/en.ts
Original file line number Diff line number Diff line change
Expand Up @@ -1249,6 +1249,7 @@ export default {
submissionFrequencyDateOfMonth: 'Date of month',
addApprovalsTitle: 'Add approvals',
addApprovalButton: 'Add approval workflow',
addApprovalTip: 'This default workflow applies to all members, unless a more specific workflow exists',
approver: 'Approver',
connectBankAccount: 'Connect bank account',
addApprovalsDescription: 'Require additional approval before authorizing a payment.',
Expand All @@ -1272,6 +1273,18 @@ export default {
two: 'nd',
few: 'rd',
other: 'th',
/* eslint-disable @typescript-eslint/naming-convention */
'1': 'First',
'2': 'Second',
'3': 'Third',
'4': 'Fourth',
'5': 'Fifth',
'6': 'Sixth',
'7': 'Seventh',
'8': 'Eighth',
'9': 'Ninth',
'10': 'Tenth',
/* eslint-enable @typescript-eslint/naming-convention */
},
},
},
Expand Down Expand Up @@ -2038,6 +2051,7 @@ export default {
edit: 'Edit workspace',
enabled: 'Enabled',
disabled: 'Disabled',
everyone: 'Everyone',
delete: 'Delete workspace',
settings: 'Settings',
reimburse: 'Reimbursements',
Expand Down
14 changes: 14 additions & 0 deletions src/languages/es.ts
Original file line number Diff line number Diff line change
Expand Up @@ -1258,6 +1258,7 @@ export default {
submissionFrequencyDateOfMonth: 'Fecha del mes',
addApprovalsTitle: 'Requerir aprobaciones',
addApprovalButton: 'Añadir flujo de aprobación',
addApprovalTip: 'Este flujo de trabajo por defecto se aplica a todos los miembros, a menos que exista un flujo de trabajo más específico',
approver: 'Aprobador',
connectBankAccount: 'Conectar cuenta bancaria',
addApprovalsDescription: 'Requiere una aprobación adicional antes de autorizar un pago.',
Expand All @@ -1281,6 +1282,18 @@ export default {
two: '.º',
few: '.º',
other: '.º',
/* eslint-disable @typescript-eslint/naming-convention */
'1': 'Primero',
'2': 'Segundo',
'3': 'Tercero',
'4': 'Cuarto',
'5': 'Quinto',
'6': 'Sexto',
'7': 'Séptimo',
'8': 'Octavo',
'9': 'Noveno',
'10': 'Décimo',
/* eslint-enable @typescript-eslint/naming-convention */
},
},
},
Expand Down Expand Up @@ -2073,6 +2086,7 @@ export default {
edit: 'Editar espacio de trabajo',
enabled: 'Activada',
disabled: 'Desactivada',
everyone: 'Todos',
delete: 'Eliminar espacio de trabajo',
settings: 'Configuración',
reimburse: 'Reembolsos',
Expand Down
12 changes: 8 additions & 4 deletions src/libs/LocaleDigitUtils.ts
Original file line number Diff line number Diff line change
Expand Up @@ -74,9 +74,9 @@ function fromLocaleDigit(locale: Locale, localeDigit: string): string {
/**
* Formats a number into its localized ordinal representation i.e 1st, 2nd etc
*/
function toLocaleOrdinal(locale: Locale, number: number): string {
function toLocaleOrdinal(locale: Locale, number: number, returnWords = false): string {
// Defaults to "other" suffix or "th" in English
let suffixKey = 'workflowsPage.frequencies.ordinals.other';
let suffixKey: TranslationPaths = 'workflowsPage.frequencies.ordinals.other';

// Calculate last digit of the number to determine basic ordinality
const lastDigit = number % 10;
Expand All @@ -92,9 +92,13 @@ function toLocaleOrdinal(locale: Locale, number: number): string {
suffixKey = 'workflowsPage.frequencies.ordinals.few';
}

const suffix = Localize.translate(locale, suffixKey as TranslationPaths);
if (returnWords && number >= 1 && number <= 10) {
suffixKey = `workflowsPage.frequencies.ordinals.${number}` as TranslationPaths;
}

const suffix = Localize.translate(locale, suffixKey);

return `${number}${suffix}`;
return returnWords ? suffix : `${number}${suffix}`;
}

export {toLocaleDigit, toLocaleOrdinal, fromLocaleDigit};
Loading
Loading