From da3ce7a51c617bd83e8b1b0c89ed90be35ea6d6c Mon Sep 17 00:00:00 2001 From: Wiktor Gut Date: Mon, 5 Aug 2024 16:11:33 +0200 Subject: [PATCH 01/14] upgrade Screen added --- .../advanced-approvals-icon-square.svg | 86 +++++++++++++++++++ src/CONST.ts | 11 +++ src/components/Icon/Expensicons.ts | 2 + src/languages/en.ts | 5 ++ src/languages/es.ts | 5 ++ src/pages/workspace/upgrade/UpgradeIntro.tsx | 3 +- src/styles/utils/index.ts | 4 + src/types/onyx/OnyxCommon.ts | 2 +- 8 files changed, 116 insertions(+), 2 deletions(-) create mode 100644 assets/images/simple-illustrations/advanced-approvals-icon-square.svg diff --git a/assets/images/simple-illustrations/advanced-approvals-icon-square.svg b/assets/images/simple-illustrations/advanced-approvals-icon-square.svg new file mode 100644 index 000000000000..00f3de51bd42 --- /dev/null +++ b/assets/images/simple-illustrations/advanced-approvals-icon-square.svg @@ -0,0 +1,86 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/CONST.ts b/src/CONST.ts index ed4de999c78c..84761d172d66 100755 --- a/src/CONST.ts +++ b/src/CONST.ts @@ -2110,6 +2110,7 @@ const CONST = { XERO: 'xero', NETSUITE: 'netsuite', SAGE_INTACCT: 'intacct', + APPROVALS: 'approvals', }, NAME_USER_FRIENDLY: { netsuite: 'NetSuite', @@ -2117,6 +2118,7 @@ const CONST = { quickbooksDesktop: 'Quickbooks Desktop', xero: 'Xero', intacct: 'Sage Intacct', + approvals: 'Advanced Approvals', financialForce: 'FinancialForce', billCom: 'Bill.com', zenefits: 'Zenefits', @@ -2212,6 +2214,7 @@ const CONST = { ICON_TYPE_ICON: 'icon', ICON_TYPE_AVATAR: 'avatar', ICON_TYPE_WORKSPACE: 'workspace', + ICON_TYPE_SQUARE: 'square', ACTIVITY_INDICATOR_SIZE: { LARGE: 'large', @@ -5393,6 +5396,14 @@ const CONST = { description: `workspace.upgrade.${this.POLICY.CONNECTIONS.NAME.SAGE_INTACCT}.description` as const, icon: 'IntacctSquare', }, + [this.POLICY.CONNECTIONS.NAME.APPROVALS]: { + id: this.POLICY.CONNECTIONS.NAME.APPROVALS, + alias: 'approvals', + name: this.POLICY.CONNECTIONS.NAME_USER_FRIENDLY.approvals, + title: `workspace.upgrade.${this.POLICY.CONNECTIONS.NAME.APPROVALS}.title` as const, + description: `workspace.upgrade.${this.POLICY.CONNECTIONS.NAME.APPROVALS}.description` as const, + icon: 'ApprovalsSquare', + }, glCodes: { id: 'glCodes' as const, alias: 'gl-codes', diff --git a/src/components/Icon/Expensicons.ts b/src/components/Icon/Expensicons.ts index 8b70dfb27e83..700f0d83a71b 100644 --- a/src/components/Icon/Expensicons.ts +++ b/src/components/Icon/Expensicons.ts @@ -160,6 +160,7 @@ import Send from '@assets/images/send.svg'; import Shield from '@assets/images/shield.svg'; import AppleLogo from '@assets/images/signIn/apple-logo.svg'; import GoogleLogo from '@assets/images/signIn/google-logo.svg'; +import AdvancedApprovalsSquare from '@assets/images/simple-illustrations/advanced-approvals-icon-square.svg'; import Facebook from '@assets/images/social-facebook.svg'; import Instagram from '@assets/images/social-instagram.svg'; import Linkedin from '@assets/images/social-linkedin.svg'; @@ -360,6 +361,7 @@ export { Workspace, XeroSquare, SageIntacctSquare as IntacctSquare, + AdvancedApprovalsSquare as ApprovalsSquare, Zoom, Twitter, Youtube, diff --git a/src/languages/en.ts b/src/languages/en.ts index 44686dbc53df..e37f0267c684 100755 --- a/src/languages/en.ts +++ b/src/languages/en.ts @@ -3454,6 +3454,11 @@ export default { description: `Enjoy automated syncing and reduce manual entries with the Expensify + Sage Intacct integration. Gain in-depth, real-time financial insights with user-defined dimensions, as well as expense coding by department, class, location, customer, and project (job).`, onlyAvailableOnPlan: 'Our Sage Intacct integration is only available on the Control plan, starting at ', }, + [CONST.POLICY.CONNECTIONS.NAME.APPROVALS]: { + title: 'Advanced Approvals', + description: `If you want to add more layers of approval to the mix – or just make sure the largest expenses get another set of eyes – we’ve got you covered. Advanced approvals help you put the right checks in place at every level so you keep your team’s spend under control.`, + onlyAvailableOnPlan: 'Advanced approvals are only available on the Control plan, which starts at ', + }, glCodes: { title: 'GL codes', description: `Add GL codes to your categories and tags for easy export of expenses to your accounting and payroll systems.`, diff --git a/src/languages/es.ts b/src/languages/es.ts index 090185716d4d..9931efa64cbd 100644 --- a/src/languages/es.ts +++ b/src/languages/es.ts @@ -3507,6 +3507,11 @@ export default { description: `Disfruta de una sincronización automatizada y reduce las entradas manuales con la integración Expensify + Sage Intacct. Obtén información financiera en profundidad y en tiempo real con dimensiones definidas por el usuario, así como codificación de gastos por departamento, clase, ubicación, cliente y proyecto (trabajo).`, onlyAvailableOnPlan: 'Nuestra integración Sage Intacct sólo está disponible en el plan Control, a partir de ', }, + [CONST.POLICY.CONNECTIONS.NAME.APPROVALS]: { + title: 'Aprobaciones anticipadas', + description: `Si quieres añadir más niveles de aprobación, o simplemente asegurarte de que los gastos más importantes reciben otro vistazo, no hay problema. Las aprobaciones avanzadas ayudan a realizar las comprobaciones adecuadas a cada nivel para mantener los gastos de tu equipo bajo control.`, + onlyAvailableOnPlan: 'Las aprobaciones avanzadas sólo están disponibles en el plan Control, con precios desde ', + }, glCodes: { title: 'Códigos de libro mayor', description: `Añada códigos de libro mayor a sus categorías para exportar fácilmente los gastos a sus sistemas de contabilidad y nómina.`, diff --git a/src/pages/workspace/upgrade/UpgradeIntro.tsx b/src/pages/workspace/upgrade/UpgradeIntro.tsx index 3089e0244184..f4d10a35b171 100644 --- a/src/pages/workspace/upgrade/UpgradeIntro.tsx +++ b/src/pages/workspace/upgrade/UpgradeIntro.tsx @@ -27,13 +27,14 @@ function UpgradeIntro({feature, onUpgrade, buttonDisabled, loading}: Props) { const {isExtraSmallScreenWidth, isSmallScreenWidth} = useResponsiveLayout(); const {translate} = useLocalize(); const iconSrc = feature.icon in Illustrations ? Illustrations[feature.icon as keyof typeof Illustrations] : Expensicon[feature.icon as keyof typeof Expensicon]; + const iconType = feature === CONST.UPGRADE_FEATURE_INTRO_MAPPING.approvals ? CONST.ICON_TYPE_SQUARE : CONST.ICON_TYPE_AVATAR; return ( ; ** avatar - user avatar ** workspace - workspace avatar */ -type AvatarType = typeof CONST.ICON_TYPE_AVATAR | typeof CONST.ICON_TYPE_WORKSPACE; +type AvatarType = typeof CONST.ICON_TYPE_AVATAR | typeof CONST.ICON_TYPE_WORKSPACE | typeof CONST.ICON_TYPE_SQUARE; /** Icon properties */ type Icon = { From b3115706bd6bca1bcef32e29df0320dd06364c82 Mon Sep 17 00:00:00 2001 From: Wiktor Gut Date: Mon, 5 Aug 2024 16:11:33 +0200 Subject: [PATCH 02/14] upgrade Screen added --- .../advanced-approvals-icon-square.svg | 86 +++++++++++++++++++ src/CONST.ts | 11 +++ src/components/Icon/Expensicons.ts | 2 + src/languages/en.ts | 5 ++ src/languages/es.ts | 5 ++ src/pages/workspace/upgrade/UpgradeIntro.tsx | 3 +- src/styles/utils/index.ts | 4 + src/types/onyx/OnyxCommon.ts | 2 +- 8 files changed, 116 insertions(+), 2 deletions(-) create mode 100644 assets/images/simple-illustrations/advanced-approvals-icon-square.svg diff --git a/assets/images/simple-illustrations/advanced-approvals-icon-square.svg b/assets/images/simple-illustrations/advanced-approvals-icon-square.svg new file mode 100644 index 000000000000..00f3de51bd42 --- /dev/null +++ b/assets/images/simple-illustrations/advanced-approvals-icon-square.svg @@ -0,0 +1,86 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/CONST.ts b/src/CONST.ts index 73c9bf605b47..77adbe703a21 100755 --- a/src/CONST.ts +++ b/src/CONST.ts @@ -2113,6 +2113,7 @@ const CONST = { XERO: 'xero', NETSUITE: 'netsuite', SAGE_INTACCT: 'intacct', + APPROVALS: 'approvals', }, NAME_USER_FRIENDLY: { netsuite: 'NetSuite', @@ -2120,6 +2121,7 @@ const CONST = { quickbooksDesktop: 'Quickbooks Desktop', xero: 'Xero', intacct: 'Sage Intacct', + approvals: 'Advanced Approvals', financialForce: 'FinancialForce', billCom: 'Bill.com', zenefits: 'Zenefits', @@ -2215,6 +2217,7 @@ const CONST = { ICON_TYPE_ICON: 'icon', ICON_TYPE_AVATAR: 'avatar', ICON_TYPE_WORKSPACE: 'workspace', + ICON_TYPE_SQUARE: 'square', ACTIVITY_INDICATOR_SIZE: { LARGE: 'large', @@ -5396,6 +5399,14 @@ const CONST = { description: `workspace.upgrade.${this.POLICY.CONNECTIONS.NAME.SAGE_INTACCT}.description` as const, icon: 'IntacctSquare', }, + [this.POLICY.CONNECTIONS.NAME.APPROVALS]: { + id: this.POLICY.CONNECTIONS.NAME.APPROVALS, + alias: 'approvals', + name: this.POLICY.CONNECTIONS.NAME_USER_FRIENDLY.approvals, + title: `workspace.upgrade.${this.POLICY.CONNECTIONS.NAME.APPROVALS}.title` as const, + description: `workspace.upgrade.${this.POLICY.CONNECTIONS.NAME.APPROVALS}.description` as const, + icon: 'ApprovalsSquare', + }, glCodes: { id: 'glCodes' as const, alias: 'gl-codes', diff --git a/src/components/Icon/Expensicons.ts b/src/components/Icon/Expensicons.ts index a3fd1c93a261..c011c86ddde5 100644 --- a/src/components/Icon/Expensicons.ts +++ b/src/components/Icon/Expensicons.ts @@ -160,6 +160,7 @@ import Send from '@assets/images/send.svg'; import Shield from '@assets/images/shield.svg'; import AppleLogo from '@assets/images/signIn/apple-logo.svg'; import GoogleLogo from '@assets/images/signIn/google-logo.svg'; +import AdvancedApprovalsSquare from '@assets/images/simple-illustrations/advanced-approvals-icon-square.svg'; import Facebook from '@assets/images/social-facebook.svg'; import Instagram from '@assets/images/social-instagram.svg'; import Linkedin from '@assets/images/social-linkedin.svg'; @@ -358,6 +359,7 @@ export { Workspace, XeroSquare, SageIntacctSquare as IntacctSquare, + AdvancedApprovalsSquare as ApprovalsSquare, Zoom, Twitter, Youtube, diff --git a/src/languages/en.ts b/src/languages/en.ts index 8cc1f0887e75..74dd97d81f1c 100755 --- a/src/languages/en.ts +++ b/src/languages/en.ts @@ -3440,6 +3440,11 @@ export default { description: `Enjoy automated syncing and reduce manual entries with the Expensify + Sage Intacct integration. Gain in-depth, real-time financial insights with user-defined dimensions, as well as expense coding by department, class, location, customer, and project (job).`, onlyAvailableOnPlan: 'Our Sage Intacct integration is only available on the Control plan, starting at ', }, + [CONST.POLICY.CONNECTIONS.NAME.APPROVALS]: { + title: 'Advanced Approvals', + description: `If you want to add more layers of approval to the mix – or just make sure the largest expenses get another set of eyes – we’ve got you covered. Advanced approvals help you put the right checks in place at every level so you keep your team’s spend under control.`, + onlyAvailableOnPlan: 'Advanced approvals are only available on the Control plan, which starts at ', + }, glCodes: { title: 'GL codes', description: `Add GL codes to your categories and tags for easy export of expenses to your accounting and payroll systems.`, diff --git a/src/languages/es.ts b/src/languages/es.ts index b659123c0632..c94ff20fe35c 100644 --- a/src/languages/es.ts +++ b/src/languages/es.ts @@ -3493,6 +3493,11 @@ export default { description: `Disfruta de una sincronización automatizada y reduce las entradas manuales con la integración Expensify + Sage Intacct. Obtén información financiera en profundidad y en tiempo real con dimensiones definidas por el usuario, así como codificación de gastos por departamento, clase, ubicación, cliente y proyecto (trabajo).`, onlyAvailableOnPlan: 'Nuestra integración Sage Intacct sólo está disponible en el plan Control, a partir de ', }, + [CONST.POLICY.CONNECTIONS.NAME.APPROVALS]: { + title: 'Aprobaciones anticipadas', + description: `Si quieres añadir más niveles de aprobación, o simplemente asegurarte de que los gastos más importantes reciben otro vistazo, no hay problema. Las aprobaciones avanzadas ayudan a realizar las comprobaciones adecuadas a cada nivel para mantener los gastos de tu equipo bajo control.`, + onlyAvailableOnPlan: 'Las aprobaciones avanzadas sólo están disponibles en el plan Control, con precios desde ', + }, glCodes: { title: 'Códigos de libro mayor', description: `Añada códigos de libro mayor a sus categorías para exportar fácilmente los gastos a sus sistemas de contabilidad y nómina.`, diff --git a/src/pages/workspace/upgrade/UpgradeIntro.tsx b/src/pages/workspace/upgrade/UpgradeIntro.tsx index 3089e0244184..f4d10a35b171 100644 --- a/src/pages/workspace/upgrade/UpgradeIntro.tsx +++ b/src/pages/workspace/upgrade/UpgradeIntro.tsx @@ -27,13 +27,14 @@ function UpgradeIntro({feature, onUpgrade, buttonDisabled, loading}: Props) { const {isExtraSmallScreenWidth, isSmallScreenWidth} = useResponsiveLayout(); const {translate} = useLocalize(); const iconSrc = feature.icon in Illustrations ? Illustrations[feature.icon as keyof typeof Illustrations] : Expensicon[feature.icon as keyof typeof Expensicon]; + const iconType = feature === CONST.UPGRADE_FEATURE_INTRO_MAPPING.approvals ? CONST.ICON_TYPE_SQUARE : CONST.ICON_TYPE_AVATAR; return ( ; ** avatar - user avatar ** workspace - workspace avatar */ -type AvatarType = typeof CONST.ICON_TYPE_AVATAR | typeof CONST.ICON_TYPE_WORKSPACE; +type AvatarType = typeof CONST.ICON_TYPE_AVATAR | typeof CONST.ICON_TYPE_WORKSPACE | typeof CONST.ICON_TYPE_SQUARE; /** Icon properties */ type Icon = { From 0a27044a76f174ae9cb5844b4ba4080327dd6cbb Mon Sep 17 00:00:00 2001 From: Wiktor Gut Date: Tue, 6 Aug 2024 09:33:17 +0200 Subject: [PATCH 03/14] adding approvals to Connections --- src/types/onyx/Policy.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/types/onyx/Policy.ts b/src/types/onyx/Policy.ts index 5b781ed7c034..e8241192edf6 100644 --- a/src/types/onyx/Policy.ts +++ b/src/types/onyx/Policy.ts @@ -1212,6 +1212,9 @@ type Connections = { /** Sage Intacct integration connection */ intacct: Connection; + + /** Advanced Approvals integration connection */ + approvals: Connection; }; /** Names of integration connections */ From e357bd216ae812b322e42b1a53b7a31abfe9ad37 Mon Sep 17 00:00:00 2001 From: Wiktor Gut Date: Tue, 6 Aug 2024 11:00:37 +0200 Subject: [PATCH 04/14] solution to Connections --- src/CONST.ts | 21 ++++++++++++++------- src/languages/en.ts | 2 +- src/languages/es.ts | 2 +- src/types/onyx/Policy.ts | 3 --- 4 files changed, 16 insertions(+), 12 deletions(-) diff --git a/src/CONST.ts b/src/CONST.ts index 5be9312cde25..0939e5f4ea60 100755 --- a/src/CONST.ts +++ b/src/CONST.ts @@ -2113,6 +2113,15 @@ const CONST = { AUTOREPORTING_OFFSET: 'autoReportingOffset', GENERAL_SETTINGS: 'generalSettings', }, + // Upgradeable modules that don't need outside connections + INTERNAL: { + NAME: { + APPROVALS: 'approvals', + }, + NAME_USER_FRIENDLY: { + approvals: 'Advanced Approvals', + }, + }, CONNECTIONS: { NAME: { // Here we will add other connections names when we add support for them @@ -2120,7 +2129,6 @@ const CONST = { XERO: 'xero', NETSUITE: 'netsuite', SAGE_INTACCT: 'intacct', - APPROVALS: 'approvals', }, NAME_USER_FRIENDLY: { netsuite: 'NetSuite', @@ -2128,7 +2136,6 @@ const CONST = { quickbooksDesktop: 'Quickbooks Desktop', xero: 'Xero', intacct: 'Sage Intacct', - approvals: 'Advanced Approvals', financialForce: 'FinancialForce', billCom: 'Bill.com', zenefits: 'Zenefits', @@ -5407,12 +5414,12 @@ const CONST = { description: `workspace.upgrade.${this.POLICY.CONNECTIONS.NAME.SAGE_INTACCT}.description` as const, icon: 'IntacctSquare', }, - [this.POLICY.CONNECTIONS.NAME.APPROVALS]: { - id: this.POLICY.CONNECTIONS.NAME.APPROVALS, + [this.POLICY.INTERNAL.NAME.APPROVALS]: { + id: this.POLICY.INTERNAL.NAME.APPROVALS, alias: 'approvals', - name: this.POLICY.CONNECTIONS.NAME_USER_FRIENDLY.approvals, - title: `workspace.upgrade.${this.POLICY.CONNECTIONS.NAME.APPROVALS}.title` as const, - description: `workspace.upgrade.${this.POLICY.CONNECTIONS.NAME.APPROVALS}.description` as const, + name: this.POLICY.INTERNAL.NAME_USER_FRIENDLY.approvals, + title: `workspace.upgrade.${this.POLICY.INTERNAL.NAME.APPROVALS}.title` as const, + description: `workspace.upgrade.${this.POLICY.INTERNAL.NAME.APPROVALS}.description` as const, icon: 'ApprovalsSquare', }, glCodes: { diff --git a/src/languages/en.ts b/src/languages/en.ts index 42ed53ceb6cb..2d413dc64440 100755 --- a/src/languages/en.ts +++ b/src/languages/en.ts @@ -3454,7 +3454,7 @@ export default { description: `Enjoy automated syncing and reduce manual entries with the Expensify + Sage Intacct integration. Gain in-depth, real-time financial insights with user-defined dimensions, as well as expense coding by department, class, location, customer, and project (job).`, onlyAvailableOnPlan: 'Our Sage Intacct integration is only available on the Control plan, starting at ', }, - [CONST.POLICY.CONNECTIONS.NAME.APPROVALS]: { + [CONST.POLICY.INTERNAL.NAME.APPROVALS]: { title: 'Advanced Approvals', description: `If you want to add more layers of approval to the mix – or just make sure the largest expenses get another set of eyes – we’ve got you covered. Advanced approvals help you put the right checks in place at every level so you keep your team’s spend under control.`, onlyAvailableOnPlan: 'Advanced approvals are only available on the Control plan, which starts at ', diff --git a/src/languages/es.ts b/src/languages/es.ts index b29cc98cfb4c..5c8cb49ff4e6 100644 --- a/src/languages/es.ts +++ b/src/languages/es.ts @@ -3507,7 +3507,7 @@ export default { description: `Disfruta de una sincronización automatizada y reduce las entradas manuales con la integración Expensify + Sage Intacct. Obtén información financiera en profundidad y en tiempo real con dimensiones definidas por el usuario, así como codificación de gastos por departamento, clase, ubicación, cliente y proyecto (trabajo).`, onlyAvailableOnPlan: 'Nuestra integración Sage Intacct sólo está disponible en el plan Control, a partir de ', }, - [CONST.POLICY.CONNECTIONS.NAME.APPROVALS]: { + [CONST.POLICY.INTERNAL.NAME.APPROVALS]: { title: 'Aprobaciones anticipadas', description: `Si quieres añadir más niveles de aprobación, o simplemente asegurarte de que los gastos más importantes reciben otro vistazo, no hay problema. Las aprobaciones avanzadas ayudan a realizar las comprobaciones adecuadas a cada nivel para mantener los gastos de tu equipo bajo control.`, onlyAvailableOnPlan: 'Las aprobaciones avanzadas sólo están disponibles en el plan Control, con precios desde ', diff --git a/src/types/onyx/Policy.ts b/src/types/onyx/Policy.ts index e8241192edf6..5b781ed7c034 100644 --- a/src/types/onyx/Policy.ts +++ b/src/types/onyx/Policy.ts @@ -1212,9 +1212,6 @@ type Connections = { /** Sage Intacct integration connection */ intacct: Connection; - - /** Advanced Approvals integration connection */ - approvals: Connection; }; /** Names of integration connections */ From dfbfc6b84eb00d9574bbc9c40c747f7ab993070a Mon Sep 17 00:00:00 2001 From: Wiktor Gut Date: Tue, 6 Aug 2024 12:18:27 +0200 Subject: [PATCH 05/14] Avatar suiting for approvalsUpgradeIntro --- src/CONST.ts | 1 - src/pages/workspace/upgrade/UpgradeIntro.tsx | 5 +++-- src/styles/utils/index.ts | 4 ---- src/types/onyx/OnyxCommon.ts | 2 +- 4 files changed, 4 insertions(+), 8 deletions(-) diff --git a/src/CONST.ts b/src/CONST.ts index 0939e5f4ea60..b2fb3994b6be 100755 --- a/src/CONST.ts +++ b/src/CONST.ts @@ -2231,7 +2231,6 @@ const CONST = { ICON_TYPE_ICON: 'icon', ICON_TYPE_AVATAR: 'avatar', ICON_TYPE_WORKSPACE: 'workspace', - ICON_TYPE_SQUARE: 'square', ACTIVITY_INDICATOR_SIZE: { LARGE: 'large', diff --git a/src/pages/workspace/upgrade/UpgradeIntro.tsx b/src/pages/workspace/upgrade/UpgradeIntro.tsx index f4d10a35b171..bae0189767fa 100644 --- a/src/pages/workspace/upgrade/UpgradeIntro.tsx +++ b/src/pages/workspace/upgrade/UpgradeIntro.tsx @@ -27,15 +27,16 @@ function UpgradeIntro({feature, onUpgrade, buttonDisabled, loading}: Props) { const {isExtraSmallScreenWidth, isSmallScreenWidth} = useResponsiveLayout(); const {translate} = useLocalize(); const iconSrc = feature.icon in Illustrations ? Illustrations[feature.icon as keyof typeof Illustrations] : Expensicon[feature.icon as keyof typeof Expensicon]; - const iconType = feature === CONST.UPGRADE_FEATURE_INTRO_MAPPING.approvals ? CONST.ICON_TYPE_SQUARE : CONST.ICON_TYPE_AVATAR; + const iconAdditionalStyles = feature === CONST.UPGRADE_FEATURE_INTRO_MAPPING.approvals ? {borderRadius: 0} : undefined; return ( ; ** avatar - user avatar ** workspace - workspace avatar */ -type AvatarType = typeof CONST.ICON_TYPE_AVATAR | typeof CONST.ICON_TYPE_WORKSPACE | typeof CONST.ICON_TYPE_SQUARE; +type AvatarType = typeof CONST.ICON_TYPE_AVATAR | typeof CONST.ICON_TYPE_WORKSPACE; /** Icon properties */ type Icon = { From 0a00390cbf4b1014270720b0b8cbae12a6c48a2a Mon Sep 17 00:00:00 2001 From: Wiktor Gut Date: Tue, 6 Aug 2024 12:24:34 +0200 Subject: [PATCH 06/14] simplifying approvals CONST --- src/CONST.ts | 19 +++++-------------- 1 file changed, 5 insertions(+), 14 deletions(-) diff --git a/src/CONST.ts b/src/CONST.ts index b2fb3994b6be..bdfbf6e79dcb 100755 --- a/src/CONST.ts +++ b/src/CONST.ts @@ -2113,15 +2113,6 @@ const CONST = { AUTOREPORTING_OFFSET: 'autoReportingOffset', GENERAL_SETTINGS: 'generalSettings', }, - // Upgradeable modules that don't need outside connections - INTERNAL: { - NAME: { - APPROVALS: 'approvals', - }, - NAME_USER_FRIENDLY: { - approvals: 'Advanced Approvals', - }, - }, CONNECTIONS: { NAME: { // Here we will add other connections names when we add support for them @@ -5413,12 +5404,12 @@ const CONST = { description: `workspace.upgrade.${this.POLICY.CONNECTIONS.NAME.SAGE_INTACCT}.description` as const, icon: 'IntacctSquare', }, - [this.POLICY.INTERNAL.NAME.APPROVALS]: { - id: this.POLICY.INTERNAL.NAME.APPROVALS, + approvals: { + id: 'approvals', alias: 'approvals', - name: this.POLICY.INTERNAL.NAME_USER_FRIENDLY.approvals, - title: `workspace.upgrade.${this.POLICY.INTERNAL.NAME.APPROVALS}.title` as const, - description: `workspace.upgrade.${this.POLICY.INTERNAL.NAME.APPROVALS}.description` as const, + name: 'Advanced Approvals', + title: `workspace.upgrade.approvals.title` as const, + description: `workspace.upgrade.approvals.description` as const, icon: 'ApprovalsSquare', }, glCodes: { From bda22d0fc962b430421231fbbcb7fea548451340 Mon Sep 17 00:00:00 2001 From: Wiktor Gut Date: Tue, 6 Aug 2024 12:35:19 +0200 Subject: [PATCH 07/14] fix CONST refactor --- src/languages/en.ts | 2 +- src/languages/es.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/languages/en.ts b/src/languages/en.ts index 2d413dc64440..d4f99671bf0c 100755 --- a/src/languages/en.ts +++ b/src/languages/en.ts @@ -3454,7 +3454,7 @@ export default { description: `Enjoy automated syncing and reduce manual entries with the Expensify + Sage Intacct integration. Gain in-depth, real-time financial insights with user-defined dimensions, as well as expense coding by department, class, location, customer, and project (job).`, onlyAvailableOnPlan: 'Our Sage Intacct integration is only available on the Control plan, starting at ', }, - [CONST.POLICY.INTERNAL.NAME.APPROVALS]: { + [CONST.UPGRADE_FEATURE_INTRO_MAPPING.approvals.id]: { title: 'Advanced Approvals', description: `If you want to add more layers of approval to the mix – or just make sure the largest expenses get another set of eyes – we’ve got you covered. Advanced approvals help you put the right checks in place at every level so you keep your team’s spend under control.`, onlyAvailableOnPlan: 'Advanced approvals are only available on the Control plan, which starts at ', diff --git a/src/languages/es.ts b/src/languages/es.ts index 5c8cb49ff4e6..230694a8b6f4 100644 --- a/src/languages/es.ts +++ b/src/languages/es.ts @@ -3507,7 +3507,7 @@ export default { description: `Disfruta de una sincronización automatizada y reduce las entradas manuales con la integración Expensify + Sage Intacct. Obtén información financiera en profundidad y en tiempo real con dimensiones definidas por el usuario, así como codificación de gastos por departamento, clase, ubicación, cliente y proyecto (trabajo).`, onlyAvailableOnPlan: 'Nuestra integración Sage Intacct sólo está disponible en el plan Control, a partir de ', }, - [CONST.POLICY.INTERNAL.NAME.APPROVALS]: { + [CONST.UPGRADE_FEATURE_INTRO_MAPPING.approvals.id]: { title: 'Aprobaciones anticipadas', description: `Si quieres añadir más niveles de aprobación, o simplemente asegurarte de que los gastos más importantes reciben otro vistazo, no hay problema. Las aprobaciones avanzadas ayudan a realizar las comprobaciones adecuadas a cada nivel para mantener los gastos de tu equipo bajo control.`, onlyAvailableOnPlan: 'Las aprobaciones avanzadas sólo están disponibles en el plan Control, con precios desde ', From 46948feec37f6f16c83099175d9e46ce72e0e4de Mon Sep 17 00:00:00 2001 From: Wiktor Gut Date: Tue, 6 Aug 2024 13:58:07 +0200 Subject: [PATCH 08/14] fix ts errors 1 --- src/CONST.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/CONST.ts b/src/CONST.ts index bdfbf6e79dcb..902d303b3166 100755 --- a/src/CONST.ts +++ b/src/CONST.ts @@ -5405,9 +5405,9 @@ const CONST = { icon: 'IntacctSquare', }, approvals: { - id: 'approvals', - alias: 'approvals', - name: 'Advanced Approvals', + id: 'approvals' as const, + alias: 'approvals' as const, + name: 'Advanced Approvals' as const, title: `workspace.upgrade.approvals.title` as const, description: `workspace.upgrade.approvals.description` as const, icon: 'ApprovalsSquare', From 403a870c7e3b0cc57f90271764cc90cea42feeae Mon Sep 17 00:00:00 2001 From: Wiktor Gut Date: Tue, 6 Aug 2024 15:39:01 +0200 Subject: [PATCH 09/14] expensicon export --- src/CONST.ts | 2 +- src/components/Icon/Expensicons.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/CONST.ts b/src/CONST.ts index 902d303b3166..e46d06ad75db 100755 --- a/src/CONST.ts +++ b/src/CONST.ts @@ -5410,7 +5410,7 @@ const CONST = { name: 'Advanced Approvals' as const, title: `workspace.upgrade.approvals.title` as const, description: `workspace.upgrade.approvals.description` as const, - icon: 'ApprovalsSquare', + icon: 'AdvancedApprovalsSquare', }, glCodes: { id: 'glCodes' as const, diff --git a/src/components/Icon/Expensicons.ts b/src/components/Icon/Expensicons.ts index 700f0d83a71b..de7aff8059f3 100644 --- a/src/components/Icon/Expensicons.ts +++ b/src/components/Icon/Expensicons.ts @@ -361,7 +361,7 @@ export { Workspace, XeroSquare, SageIntacctSquare as IntacctSquare, - AdvancedApprovalsSquare as ApprovalsSquare, + AdvancedApprovalsSquare, Zoom, Twitter, Youtube, From 77395e8ac0919037c2f6f183aed966b0bcba8a62 Mon Sep 17 00:00:00 2001 From: Wiktor Gut Date: Tue, 6 Aug 2024 16:25:23 +0200 Subject: [PATCH 10/14] redirect to upgrade --- .../workflows/WorkspaceWorkflowsPage.tsx | 25 +++++++++++-------- 1 file changed, 15 insertions(+), 10 deletions(-) diff --git a/src/pages/workspace/workflows/WorkspaceWorkflowsPage.tsx b/src/pages/workspace/workflows/WorkspaceWorkflowsPage.tsx index 65c7203ecc51..27197bdfc945 100644 --- a/src/pages/workspace/workflows/WorkspaceWorkflowsPage.tsx +++ b/src/pages/workspace/workflows/WorkspaceWorkflowsPage.tsx @@ -95,14 +95,19 @@ function WorkspaceWorkflowsPage({policy, betas, route}: WorkspaceWorkflowsPagePr }, [fetchData]), ); - const createNewApprovalWorkflow = useCallback(() => { - Workflow.setApprovalWorkflow({ - ...EMPTY_APPROVAL_WORKFLOW, - availableMembers: approvalWorkflows.at(0)?.members ?? [], - }); - - Navigation.navigate(ROUTES.WORKSPACE_WORKFLOWS_APPROVALS_EXPENSES_FROM.getRoute(route.params.policyID)); - }, [approvalWorkflows, route.params.policyID]); + const addApprovalAction = useCallback(() => { + if (!PolicyUtils.isControlPolicy(policy)) { + Navigation.navigate( + ROUTES.WORKSPACE_UPGRADE.getRoute(route.params.policyID, CONST.UPGRADE_FEATURE_INTRO_MAPPING.approvals.alias, ROUTES.WORKSPACE_WORKFLOWS.getRoute(route.params.policyID)), + ); + } else { + Workflow.setApprovalWorkflow({ + ...EMPTY_APPROVAL_WORKFLOW, + availableMembers: approvalWorkflows.at(0)?.members ?? [], + }); + Navigation.navigate(ROUTES.WORKSPACE_WORKFLOWS_APPROVALS_EXPENSES_FROM.getRoute(route.params.policyID)); + } + }, [approvalWorkflows, policy, route.params.policyID]); const optionItems: ToggleSettingOptionRowProps[] = useMemo(() => { const {accountNumber, addressName, bankName, bankAccountID} = policy?.achAccount ?? {}; @@ -173,7 +178,7 @@ function WorkspaceWorkflowsPage({policy, betas, route}: WorkspaceWorkflowsPagePr iconWidth={20} iconFill={theme.success} style={[styles.sectionMenuItemTopDescription, styles.mt6, styles.mbn3]} - onPress={createNewApprovalWorkflow} + onPress={addApprovalAction} /> ) : ( @@ -285,8 +290,8 @@ function WorkspaceWorkflowsPage({policy, betas, route}: WorkspaceWorkflowsPagePr approvalWorkflows, theme.success, theme.spinner, + addApprovalAction, policyApproverName, - createNewApprovalWorkflow, isOffline, isPolicyAdmin, displayNameForAuthorizedPayer, From ac55d379f9c9273d2f42043239f87012a2d2ab77 Mon Sep 17 00:00:00 2001 From: Wiktor Gut Date: Tue, 6 Aug 2024 16:36:06 +0200 Subject: [PATCH 11/14] styles refactor --- src/pages/workspace/upgrade/UpgradeIntro.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/workspace/upgrade/UpgradeIntro.tsx b/src/pages/workspace/upgrade/UpgradeIntro.tsx index bae0189767fa..22433e9e74db 100644 --- a/src/pages/workspace/upgrade/UpgradeIntro.tsx +++ b/src/pages/workspace/upgrade/UpgradeIntro.tsx @@ -27,7 +27,7 @@ function UpgradeIntro({feature, onUpgrade, buttonDisabled, loading}: Props) { const {isExtraSmallScreenWidth, isSmallScreenWidth} = useResponsiveLayout(); const {translate} = useLocalize(); const iconSrc = feature.icon in Illustrations ? Illustrations[feature.icon as keyof typeof Illustrations] : Expensicon[feature.icon as keyof typeof Expensicon]; - const iconAdditionalStyles = feature === CONST.UPGRADE_FEATURE_INTRO_MAPPING.approvals ? {borderRadius: 0} : undefined; + const iconAdditionalStyles = feature === CONST.UPGRADE_FEATURE_INTRO_MAPPING.approvals ? styles.br0 : undefined; return ( From 78f5039a44153697a32d592c0558c9df617d56b8 Mon Sep 17 00:00:00 2001 From: Wiktor Gut Date: Wed, 7 Aug 2024 10:44:59 +0200 Subject: [PATCH 12/14] fix comparison --- src/pages/workspace/upgrade/UpgradeIntro.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/workspace/upgrade/UpgradeIntro.tsx b/src/pages/workspace/upgrade/UpgradeIntro.tsx index 22433e9e74db..7ba20b379efa 100644 --- a/src/pages/workspace/upgrade/UpgradeIntro.tsx +++ b/src/pages/workspace/upgrade/UpgradeIntro.tsx @@ -27,7 +27,7 @@ function UpgradeIntro({feature, onUpgrade, buttonDisabled, loading}: Props) { const {isExtraSmallScreenWidth, isSmallScreenWidth} = useResponsiveLayout(); const {translate} = useLocalize(); const iconSrc = feature.icon in Illustrations ? Illustrations[feature.icon as keyof typeof Illustrations] : Expensicon[feature.icon as keyof typeof Expensicon]; - const iconAdditionalStyles = feature === CONST.UPGRADE_FEATURE_INTRO_MAPPING.approvals ? styles.br0 : undefined; + const iconAdditionalStyles = feature.id === CONST.UPGRADE_FEATURE_INTRO_MAPPING.approvals.id ? styles.br0 : undefined; return ( From 446bfa24c4ffde0790f5d0b9d83c2d276fa87485 Mon Sep 17 00:00:00 2001 From: Wiktor Gut Date: Wed, 7 Aug 2024 15:43:24 +0200 Subject: [PATCH 13/14] addApprovalAction comment and refactor --- .../workspace/workflows/WorkspaceWorkflowsPage.tsx | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/src/pages/workspace/workflows/WorkspaceWorkflowsPage.tsx b/src/pages/workspace/workflows/WorkspaceWorkflowsPage.tsx index 27197bdfc945..953f5a73055e 100644 --- a/src/pages/workspace/workflows/WorkspaceWorkflowsPage.tsx +++ b/src/pages/workspace/workflows/WorkspaceWorkflowsPage.tsx @@ -95,18 +95,19 @@ function WorkspaceWorkflowsPage({policy, betas, route}: WorkspaceWorkflowsPagePr }, [fetchData]), ); + // User should be allowed to add new Approval Workflow only if he has upgrade to Control Plan, otherwise redirected to the Upgrade Page const addApprovalAction = useCallback(() => { if (!PolicyUtils.isControlPolicy(policy)) { Navigation.navigate( ROUTES.WORKSPACE_UPGRADE.getRoute(route.params.policyID, CONST.UPGRADE_FEATURE_INTRO_MAPPING.approvals.alias, ROUTES.WORKSPACE_WORKFLOWS.getRoute(route.params.policyID)), ); - } else { - Workflow.setApprovalWorkflow({ - ...EMPTY_APPROVAL_WORKFLOW, - availableMembers: approvalWorkflows.at(0)?.members ?? [], - }); - Navigation.navigate(ROUTES.WORKSPACE_WORKFLOWS_APPROVALS_EXPENSES_FROM.getRoute(route.params.policyID)); + return; } + Workflow.setApprovalWorkflow({ + ...EMPTY_APPROVAL_WORKFLOW, + availableMembers: approvalWorkflows.at(0)?.members ?? [], + }); + Navigation.navigate(ROUTES.WORKSPACE_WORKFLOWS_APPROVALS_EXPENSES_FROM.getRoute(route.params.policyID)); }, [approvalWorkflows, policy, route.params.policyID]); const optionItems: ToggleSettingOptionRowProps[] = useMemo(() => { From 478299d632c10f9902fd2de47335c9dc60d1bb2c Mon Sep 17 00:00:00 2001 From: Wiktor Gut Date: Wed, 7 Aug 2024 15:46:16 +0200 Subject: [PATCH 14/14] comment syntax fix --- src/pages/workspace/workflows/WorkspaceWorkflowsPage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/workspace/workflows/WorkspaceWorkflowsPage.tsx b/src/pages/workspace/workflows/WorkspaceWorkflowsPage.tsx index 953f5a73055e..b513ebccc3b3 100644 --- a/src/pages/workspace/workflows/WorkspaceWorkflowsPage.tsx +++ b/src/pages/workspace/workflows/WorkspaceWorkflowsPage.tsx @@ -95,7 +95,7 @@ function WorkspaceWorkflowsPage({policy, betas, route}: WorkspaceWorkflowsPagePr }, [fetchData]), ); - // User should be allowed to add new Approval Workflow only if he has upgrade to Control Plan, otherwise redirected to the Upgrade Page + // User should be allowed to add new Approval Workflow only if he's upgraded to Control Plan, otherwise redirected to the Upgrade Page const addApprovalAction = useCallback(() => { if (!PolicyUtils.isControlPolicy(policy)) { Navigation.navigate(