From 4b2227d45d53dc23ffc0cd20caeb76a50fbb4648 Mon Sep 17 00:00:00 2001 From: Wes Risenmay Date: Thu, 14 Aug 2025 10:41:48 -0600 Subject: [PATCH 01/12] revert: removed the ability to pass an aggregator_logo_url to the ConnectLogoHeader --- src/components/ConnectLogoHeader.tsx | 11 +---------- src/components/__tests__/ConnectLogoHeader-test.tsx | 9 --------- 2 files changed, 1 insertion(+), 19 deletions(-) diff --git a/src/components/ConnectLogoHeader.tsx b/src/components/ConnectLogoHeader.tsx index 9d6f9553d0..b82173475c 100644 --- a/src/components/ConnectLogoHeader.tsx +++ b/src/components/ConnectLogoHeader.tsx @@ -20,7 +20,6 @@ interface ConnectLogoHeaderProps { institution?: { guid?: string logo_url?: string - aggregator_logo_url?: string } } @@ -49,15 +48,7 @@ export const ConnectLogoHeader: React.FC = (props) => { return (
- {props?.institution?.aggregator_logo_url ? ( - aggregator logo - ) : ( - defaultAggregatorLogo() - )} + {defaultAggregatorLogo()}
diff --git a/src/components/__tests__/ConnectLogoHeader-test.tsx b/src/components/__tests__/ConnectLogoHeader-test.tsx index 07ea23a31d..8b34ddbff3 100644 --- a/src/components/__tests__/ConnectLogoHeader-test.tsx +++ b/src/components/__tests__/ConnectLogoHeader-test.tsx @@ -67,13 +67,4 @@ describe('ConnectLogoHeader', () => { render(, { preloadedState: initialState }) expect(screen.queryAllByTestId('svg-image').length).toBe(2) }) - - it('renders the aggregatorHeaderOverride when provided', () => { - const overrideUrl = 'https://example.com/logo.png' - - render() - - const img = screen.getByAltText('aggregator logo') - expect(img.getAttribute('src')).toEqual(overrideUrl) - }) }) From 22a3261372952d3d72c29735f85c6d3a0e71218b Mon Sep 17 00:00:00 2001 From: Wes Risenmay Date: Fri, 15 Aug 2025 11:08:17 -0600 Subject: [PATCH 02/12] changed the connecting text and updated to new background images --- package-lock.json | 4 +- package.json | 2 +- src/components/ConnectBackgroundImage.tsx | 22 ++++++++ src/components/ConnectLogoHeader.tsx | 12 +---- src/const/language/es.json | 2 +- src/const/language/es.po | 4 +- src/const/language/frCa.json | 2 +- src/const/language/frCa.po | 4 +- .../header/ConnectHeaderBackdropDark.svg | 53 ++----------------- .../header/ConnectHeaderBackdropLight.svg | 53 ++----------------- src/views/connecting/Connecting.js | 2 +- 11 files changed, 42 insertions(+), 118 deletions(-) create mode 100644 src/components/ConnectBackgroundImage.tsx diff --git a/package-lock.json b/package-lock.json index c2b6f89172..319851b585 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@mxenabled/connect-widget", - "version": "0.15.5", + "version": "0.0.0-semantic-release", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@mxenabled/connect-widget", - "version": "0.15.5", + "version": "0.0.0-semantic-release", "dependencies": { "@emotion/react": "^11.13.0", "@emotion/styled": "^11.13.0", diff --git a/package.json b/package.json index c922eeaab5..1edeceab98 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "@mxenabled/connect-widget", "description": "A simple ui library for React", - "version": "0.15.5", + "version": "0.0.0-semantic-release", "module": "dist/index.es.js", "types": "dist/index.d.ts", "type": "module", diff --git a/src/components/ConnectBackgroundImage.tsx b/src/components/ConnectBackgroundImage.tsx new file mode 100644 index 0000000000..2dc2e6b483 --- /dev/null +++ b/src/components/ConnectBackgroundImage.tsx @@ -0,0 +1,22 @@ +import React from 'react' +import { useSelector } from 'react-redux' +import { useTokens } from '@kyper/tokenprovider' +import { COLOR_SCHEME } from 'src/const/Connect' +import { selectColorScheme } from 'src/redux/reducers/configSlice' +import ConnectHeaderBackdropDark from 'src/images/header/ConnectHeaderBackdropDark.svg' +import ConnectHeaderBackdropLight from 'src/images/header/ConnectHeaderBackdropLight.svg' + +export const ConnectBackgroundImage = () => { + const colorScheme = useSelector(selectColorScheme) + const tokens = useTokens() + + return ( +
+ {colorScheme === COLOR_SCHEME.LIGHT ? ( + + ) : ( + + )} +
+ ) +} diff --git a/src/components/ConnectLogoHeader.tsx b/src/components/ConnectLogoHeader.tsx index b82173475c..59c144db67 100644 --- a/src/components/ConnectLogoHeader.tsx +++ b/src/components/ConnectLogoHeader.tsx @@ -12,9 +12,7 @@ import { ClientLogo } from 'src/components/ClientLogo' import ConnectHeaderInstitutionLight from 'src/images/header/ConnectHeaderInstitutionLight.svg' import ConnectHeaderInstitutionDark from 'src/images/header/ConnectHeaderInstitutionDark.svg' - -import ConnectHeaderBackdropDark from 'src/images/header/ConnectHeaderBackdropDark.svg' -import ConnectHeaderBackdropLight from 'src/images/header/ConnectHeaderBackdropLight.svg' +import { ConnectBackgroundImage } from './ConnectBackgroundImage' interface ConnectLogoHeaderProps { institution?: { @@ -39,16 +37,10 @@ export const ConnectLogoHeader: React.FC = (props) => {
) - const defaultAggregatorLogo = () => - colorScheme === COLOR_SCHEME.LIGHT ? ( - - ) : ( - - ) return (
- {defaultAggregatorLogo()} +
diff --git a/src/const/language/es.json b/src/const/language/es.json index 163308b9f0..934e3fac24 100644 --- a/src/const/language/es.json +++ b/src/const/language/es.json @@ -185,7 +185,7 @@ "Enter account information": "Introduzca la información de la cuenta", "Verification must be enabled to use this feature.": "La verificación debe estar habilitada para usar esta función.", "Please try again or come back later.": "Inténtalo de nuevo o vuelve más tarde.", - "Connecting to %1": "Conectarse a %1", + "Connecting to": "Conectarse a", "Manual Institution": "Institución Manual", "Verify identity": "Verificar identidad", "Payment due day": "Día de vencimiento del pago", diff --git a/src/const/language/es.po b/src/const/language/es.po index 2f33be6188..8c648945a2 100644 --- a/src/const/language/es.po +++ b/src/const/language/es.po @@ -935,8 +935,8 @@ msgid "Please try again or come back later." msgstr "Inténtalo de nuevo o vuelve más tarde." #: src/views/connecting/Connecting.js -msgid "Connecting to %1" -msgstr "Conectarse a %1" +msgid "Connecting to" +msgstr "Conectarse a" #: src/components/InstitutionBlock.js msgid "Manual Institution" diff --git a/src/const/language/frCa.json b/src/const/language/frCa.json index daa186fbfa..70d40dd873 100644 --- a/src/const/language/frCa.json +++ b/src/const/language/frCa.json @@ -189,7 +189,7 @@ "Enter account information": "Saisir les informations du compte", "Verification must be enabled to use this feature.": "La vérification doit être activée pour utiliser cette fonctionnalité.", "Please try again or come back later.": "Veuillez réessayer ou revenir plus tard.", - "Connecting to %1": "Se connecter à %1", + "Connecting to": "Se connecter à", "Manual Institution": "Établissement manuel", "Verify identity": "Vérifier l'identité", "Payment due day": "Jour d'échéance du paiement", diff --git a/src/const/language/frCa.po b/src/const/language/frCa.po index c2c671b5de..5d53c508c5 100644 --- a/src/const/language/frCa.po +++ b/src/const/language/frCa.po @@ -1026,8 +1026,8 @@ msgid "Please try again or come back later." msgstr "Veuillez réessayer ou revenir plus tard." #: src/views/connecting/Connecting.js -msgid "Connecting to %1" -msgstr "Se connecter à %1" +msgid "Connecting to" +msgstr "Se connecter à" #: src/components/InstitutionBlock.js msgid "Manual Institution" diff --git a/src/images/header/ConnectHeaderBackdropDark.svg b/src/images/header/ConnectHeaderBackdropDark.svg index 6b282651df..dd73e3f1cf 100644 --- a/src/images/header/ConnectHeaderBackdropDark.svg +++ b/src/images/header/ConnectHeaderBackdropDark.svg @@ -1,50 +1,5 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + diff --git a/src/images/header/ConnectHeaderBackdropLight.svg b/src/images/header/ConnectHeaderBackdropLight.svg index 6b7a2408df..77a7aeae46 100644 --- a/src/images/header/ConnectHeaderBackdropLight.svg +++ b/src/images/header/ConnectHeaderBackdropLight.svg @@ -1,50 +1,5 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + diff --git a/src/views/connecting/Connecting.js b/src/views/connecting/Connecting.js index 3c20a4f66f..96b1b91e73 100644 --- a/src/views/connecting/Connecting.js +++ b/src/views/connecting/Connecting.js @@ -332,7 +332,7 @@ export const Connecting = (props) => {
- {__('Connecting to %1', institution.name)} + {__('Connecting to', institution.name)} From 8c1bca3dcd3fe15627612058de5d502e9a8f2d66 Mon Sep 17 00:00:00 2001 From: Wes Risenmay Date: Mon, 18 Aug 2025 14:07:03 -0600 Subject: [PATCH 03/12] moved the connect header background image behind the progress circle and only showing 3 circles even if there are more jobs --- package-lock.json | 477 +++++++++++++----- package.json | 11 +- src/components/ConnectBackgroundImage.tsx | 14 +- src/components/ConnectLogoHeader.tsx | 16 - src/views/connecting/Connecting.js | 29 +- src/views/connecting/progress/ProgressBar.js | 31 +- src/views/connecting/progress/ProgressLine.js | 30 -- .../connecting/progress/ProgressLine.tsx | 28 + .../connecting/progress/ProgressMessage.js | 12 +- 9 files changed, 412 insertions(+), 236 deletions(-) delete mode 100644 src/views/connecting/progress/ProgressLine.js create mode 100644 src/views/connecting/progress/ProgressLine.tsx diff --git a/package-lock.json b/package-lock.json index 319851b585..482849b966 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,8 +8,8 @@ "name": "@mxenabled/connect-widget", "version": "0.0.0-semantic-release", "dependencies": { - "@emotion/react": "^11.13.0", - "@emotion/styled": "^11.13.0", + "@emotion/react": "^11.14.0", + "@emotion/styled": "^11.14.1", "@kyper/button": "^4.0.0", "@kyper/hooks": "^1.0.0", "@kyper/icon": "^1.18.1", @@ -26,7 +26,8 @@ "@kyper/userfeedback": "^2.0.0", "@kyper/utilityrow": "^2.1.0", "@mui/icons-material": "^6.1.5", - "@mui/material": "^6.1.5", + "@mui/material": "^6.5.0", + "@mxenabled/mxui": "^1.5.3", "@reduxjs/toolkit": "^2.2.7", "@types/node": "^22.1.0", "axios": "^1.8.4", @@ -685,9 +686,9 @@ "integrity": "sha512-fTBW9/8r2w3dXWYM4HCB1Rdp8NLibOw2+XELH5m5+AkWiL/KqYX6dc0kKYlaYyKjrQ6ds33MCdMPEwgs2z1rqg==" }, "node_modules/@emotion/styled": { - "version": "11.14.0", - "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.14.0.tgz", - "integrity": "sha512-XxfOnXFffatap2IyCeJyNov3kiDQWoR08gPUQxvbL7fxKryGBKUZUkG6Hz48DZwVrJSVh9sJboyV1Ds4OW6SgA==", + "version": "11.14.1", + "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.14.1.tgz", + "integrity": "sha512-qEEJt42DuToa3gurlH4Qqc1kVpNq8wO8cJtDzU46TjlzWjDlsVyevtYCRijVq3SrHsROS+gVQ8Fnea108GnKzw==", "license": "MIT", "dependencies": { "@babel/runtime": "^7.18.3", @@ -1815,9 +1816,10 @@ "license": "MIT" }, "node_modules/@mui/core-downloads-tracker": { - "version": "6.1.5", - "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-6.1.5.tgz", - "integrity": "sha512-3J96098GrC95XsLw/TpGNMxhUOnoG9NZ/17Pfk1CrJj+4rcuolsF2RdF3XAFTu/3a/A+5ouxlSIykzYz6Ee87g==", + "version": "6.5.0", + "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-6.5.0.tgz", + "integrity": "sha512-LGb8t8i6M2ZtS3Drn3GbTI1DVhDY6FJ9crEey2lZ0aN2EMZo8IZBZj9wRf4vqbZHaWjsYgtbOnJw5V8UWbmK2Q==", + "license": "MIT", "funding": { "type": "opencollective", "url": "https://opencollective.com/mui-org" @@ -1849,21 +1851,22 @@ } }, "node_modules/@mui/material": { - "version": "6.1.5", - "resolved": "https://registry.npmjs.org/@mui/material/-/material-6.1.5.tgz", - "integrity": "sha512-rhaxC7LnlOG8zIVYv7BycNbWkC5dlm9A/tcDUp0CuwA7Zf9B9JP6M3rr50cNKxI7Z0GIUesAT86ceVm44quwnQ==", + "version": "6.5.0", + "resolved": "https://registry.npmjs.org/@mui/material/-/material-6.5.0.tgz", + "integrity": "sha512-yjvtXoFcrPLGtgKRxFaH6OQPtcLPhkloC0BML6rBG5UeldR0nPULR/2E2BfXdo5JNV7j7lOzrrLX2Qf/iSidow==", + "license": "MIT", "dependencies": { - "@babel/runtime": "^7.25.7", - "@mui/core-downloads-tracker": "^6.1.5", - "@mui/system": "^6.1.5", - "@mui/types": "^7.2.18", - "@mui/utils": "^6.1.5", + "@babel/runtime": "^7.26.0", + "@mui/core-downloads-tracker": "^6.5.0", + "@mui/system": "^6.5.0", + "@mui/types": "~7.2.24", + "@mui/utils": "^6.4.9", "@popperjs/core": "^2.11.8", - "@types/react-transition-group": "^4.4.11", + "@types/react-transition-group": "^4.4.12", "clsx": "^2.1.1", "csstype": "^3.1.3", "prop-types": "^15.8.1", - "react-is": "^18.3.1", + "react-is": "^19.0.0", "react-transition-group": "^4.4.5" }, "engines": { @@ -1876,7 +1879,7 @@ "peerDependencies": { "@emotion/react": "^11.5.0", "@emotion/styled": "^11.3.0", - "@mui/material-pigment-css": "^6.1.5", + "@mui/material-pigment-css": "^6.5.0", "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0", "react": "^17.0.0 || ^18.0.0 || ^19.0.0", "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0" @@ -1897,12 +1900,13 @@ } }, "node_modules/@mui/material/node_modules/@mui/private-theming": { - "version": "6.1.5", - "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-6.1.5.tgz", - "integrity": "sha512-FJqweqEXk0KdtTho9C2h6JEKXsOT7MAVH2Uj3N5oIqs6YKxnwBn2/zL2QuYYEtj5OJ87rEUnCfFic6ldClvzJw==", + "version": "6.4.9", + "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-6.4.9.tgz", + "integrity": "sha512-LktcVmI5X17/Q5SkwjCcdOLBzt1hXuc14jYa7NPShog0GBDCDvKtcnP0V7a2s6EiVRlv7BzbWEJzH6+l/zaCxw==", + "license": "MIT", "dependencies": { - "@babel/runtime": "^7.25.7", - "@mui/utils": "^6.1.5", + "@babel/runtime": "^7.26.0", + "@mui/utils": "^6.4.9", "prop-types": "^15.8.1" }, "engines": { @@ -1923,13 +1927,14 @@ } }, "node_modules/@mui/material/node_modules/@mui/styled-engine": { - "version": "6.1.5", - "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-6.1.5.tgz", - "integrity": "sha512-tiyWzMkHeWlOoE6AqomWvYvdml8Nv5k5T+LDwOiwHEawx8P9Lyja6ZwWPU6xljwPXYYPT2KBp1XvMly7dsK46A==", + "version": "6.5.0", + "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-6.5.0.tgz", + "integrity": "sha512-8woC2zAqF4qUDSPIBZ8v3sakj+WgweolpyM/FXf8jAx6FMls+IE4Y8VDZc+zS805J7PRz31vz73n2SovKGaYgw==", + "license": "MIT", "dependencies": { - "@babel/runtime": "^7.25.7", - "@emotion/cache": "^11.13.1", - "@emotion/serialize": "^1.3.2", + "@babel/runtime": "^7.26.0", + "@emotion/cache": "^11.13.5", + "@emotion/serialize": "^1.3.3", "@emotion/sheet": "^1.4.0", "csstype": "^3.1.3", "prop-types": "^15.8.1" @@ -1956,15 +1961,16 @@ } }, "node_modules/@mui/material/node_modules/@mui/system": { - "version": "6.1.5", - "resolved": "https://registry.npmjs.org/@mui/system/-/system-6.1.5.tgz", - "integrity": "sha512-vPM9ocQ8qquRDByTG3XF/wfYTL7IWL/20EiiKqByLDps8wOmbrDG9rVznSE3ZbcjFCFfMRMhtxvN92bwe/63SA==", + "version": "6.5.0", + "resolved": "https://registry.npmjs.org/@mui/system/-/system-6.5.0.tgz", + "integrity": "sha512-XcbBYxDS+h/lgsoGe78ExXFZXtuIlSBpn/KsZq8PtZcIkUNJInkuDqcLd2rVBQrDC1u+rvVovdaWPf2FHKJf3w==", + "license": "MIT", "dependencies": { - "@babel/runtime": "^7.25.7", - "@mui/private-theming": "^6.1.5", - "@mui/styled-engine": "^6.1.5", - "@mui/types": "^7.2.18", - "@mui/utils": "^6.1.5", + "@babel/runtime": "^7.26.0", + "@mui/private-theming": "^6.4.9", + "@mui/styled-engine": "^6.5.0", + "@mui/types": "~7.2.24", + "@mui/utils": "^6.4.9", "clsx": "^2.1.1", "csstype": "^3.1.3", "prop-types": "^15.8.1" @@ -1995,16 +2001,17 @@ } }, "node_modules/@mui/material/node_modules/@mui/utils": { - "version": "6.1.5", - "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-6.1.5.tgz", - "integrity": "sha512-vp2WfNDY+IbKUIGg+eqX1Ry4t/BilMjzp6p9xO1rfqpYjH1mj8coQxxDfKxcQLzBQkmBJjymjoGOak5VUYwXug==", + "version": "6.4.9", + "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-6.4.9.tgz", + "integrity": "sha512-Y12Q9hbK9g+ZY0T3Rxrx9m2m10gaphDuUMgWxyV5kNJevVxXYCLclYUCC9vXaIk1/NdNDTcW2Yfr2OGvNFNmHg==", + "license": "MIT", "dependencies": { - "@babel/runtime": "^7.25.7", - "@mui/types": "^7.2.18", - "@types/prop-types": "^15.7.13", + "@babel/runtime": "^7.26.0", + "@mui/types": "~7.2.24", + "@types/prop-types": "^15.7.14", "clsx": "^2.1.1", "prop-types": "^15.8.1", - "react-is": "^18.3.1" + "react-is": "^19.0.0" }, "engines": { "node": ">=14.0.0" @@ -2023,13 +2030,20 @@ } } }, + "node_modules/@mui/material/node_modules/react-is": { + "version": "19.1.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-19.1.1.tgz", + "integrity": "sha512-tr41fA15Vn8p4X9ntI+yCyeGSf1TlYaY5vlTZfQmeLBrFo3psOPX6HhTDnFNL9uj3EhP0KAQ80cugCl4b4BERA==", + "license": "MIT" + }, "node_modules/@mui/private-theming": { - "version": "5.16.6", - "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.16.6.tgz", - "integrity": "sha512-rAk+Rh8Clg7Cd7shZhyt2HGTTE5wYKNSJ5sspf28Fqm/PZ69Er9o6KX25g03/FG2dfpg5GCwZh/xOojiTfm3hw==", + "version": "5.17.1", + "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.17.1.tgz", + "integrity": "sha512-XMxU0NTYcKqdsG8LRmSoxERPXwMbp16sIXPcLVgLGII/bVNagX0xaheWAwFv8+zDK7tI3ajllkuD3GZZE++ICQ==", + "license": "MIT", "dependencies": { "@babel/runtime": "^7.23.9", - "@mui/utils": "^5.16.6", + "@mui/utils": "^5.17.1", "prop-types": "^15.8.1" }, "engines": { @@ -2040,8 +2054,8 @@ "url": "https://opencollective.com/mui-org" }, "peerDependencies": { - "@types/react": "^17.0.0 || ^18.0.0", - "react": "^17.0.0 || ^18.0.0" + "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0", + "react": "^17.0.0 || ^18.0.0 || ^19.0.0" }, "peerDependenciesMeta": { "@types/react": { @@ -2050,12 +2064,14 @@ } }, "node_modules/@mui/styled-engine": { - "version": "5.16.6", - "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.16.6.tgz", - "integrity": "sha512-zaThmS67ZmtHSWToTiHslbI8jwrmITcN93LQaR2lKArbvS7Z3iLkwRoiikNWutx9MBs8Q6okKvbZq1RQYB3v7g==", + "version": "5.18.0", + "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.18.0.tgz", + "integrity": "sha512-BN/vKV/O6uaQh2z5rXV+MBlVrEkwoS/TK75rFQ2mjxA7+NBo8qtTAOA4UaM0XeJfn7kh2wZ+xQw2HAx0u+TiBg==", + "license": "MIT", "dependencies": { "@babel/runtime": "^7.23.9", - "@emotion/cache": "^11.11.0", + "@emotion/cache": "^11.13.5", + "@emotion/serialize": "^1.3.3", "csstype": "^3.1.3", "prop-types": "^15.8.1" }, @@ -2069,7 +2085,7 @@ "peerDependencies": { "@emotion/react": "^11.4.1", "@emotion/styled": "^11.3.0", - "react": "^17.0.0 || ^18.0.0" + "react": "^17.0.0 || ^18.0.0 || ^19.0.0" }, "peerDependenciesMeta": { "@emotion/react": { @@ -2081,15 +2097,16 @@ } }, "node_modules/@mui/system": { - "version": "5.16.7", - "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.16.7.tgz", - "integrity": "sha512-Jncvs/r/d/itkxh7O7opOunTqbbSSzMTHzZkNLM+FjAOg+cYAZHrPDlYe1ZGKUYORwwb2XexlWnpZp0kZ4AHuA==", + "version": "5.18.0", + "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.18.0.tgz", + "integrity": "sha512-ojZGVcRWqWhu557cdO3pWHloIGJdzVtxs3rk0F9L+x55LsUjcMUVkEhiF7E4TMxZoF9MmIHGGs0ZX3FDLAf0Xw==", + "license": "MIT", "dependencies": { "@babel/runtime": "^7.23.9", - "@mui/private-theming": "^5.16.6", - "@mui/styled-engine": "^5.16.6", - "@mui/types": "^7.2.15", - "@mui/utils": "^5.16.6", + "@mui/private-theming": "^5.17.1", + "@mui/styled-engine": "^5.18.0", + "@mui/types": "~7.2.15", + "@mui/utils": "^5.17.1", "clsx": "^2.1.0", "csstype": "^3.1.3", "prop-types": "^15.8.1" @@ -2104,8 +2121,8 @@ "peerDependencies": { "@emotion/react": "^11.5.0", "@emotion/styled": "^11.3.0", - "@types/react": "^17.0.0 || ^18.0.0", - "react": "^17.0.0 || ^18.0.0" + "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0", + "react": "^17.0.0 || ^18.0.0 || ^19.0.0" }, "peerDependenciesMeta": { "@emotion/react": { @@ -2120,9 +2137,10 @@ } }, "node_modules/@mui/types": { - "version": "7.2.18", - "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.18.tgz", - "integrity": "sha512-uvK9dWeyCJl/3ocVnTOS6nlji/Knj8/tVqVX03UVTpdmTJYu/s4jtDd9Kvv0nRGE0CUSNW1UYAci7PYypjealg==", + "version": "7.2.24", + "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.24.tgz", + "integrity": "sha512-3c8tRt/CbWZ+pEg7QpSwbdxOk36EfmhbKf6AGZsD1EcLDLTSZoxxJ86FVtcjxvjuhdyBiWKSTGZFaXCnidO2kw==", + "license": "MIT", "peerDependencies": { "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0" }, @@ -2133,16 +2151,17 @@ } }, "node_modules/@mui/utils": { - "version": "5.16.6", - "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.16.6.tgz", - "integrity": "sha512-tWiQqlhxAt3KENNiSRL+DIn9H5xNVK6Jjf70x3PnfQPz1MPBdh7yyIcAyVBT9xiw7hP3SomRhPR7hzBMBCjqEA==", + "version": "5.17.1", + "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.17.1.tgz", + "integrity": "sha512-jEZ8FTqInt2WzxDV8bhImWBqeQRD99c/id/fq83H0ER9tFl+sfZlaAoCdznGvbSQQ9ividMxqSV2c7cC1vBcQg==", + "license": "MIT", "dependencies": { "@babel/runtime": "^7.23.9", - "@mui/types": "^7.2.15", + "@mui/types": "~7.2.15", "@types/prop-types": "^15.7.12", "clsx": "^2.1.1", "prop-types": "^15.8.1", - "react-is": "^18.3.1" + "react-is": "^19.0.0" }, "engines": { "node": ">=12.0.0" @@ -2152,8 +2171,8 @@ "url": "https://opencollective.com/mui-org" }, "peerDependencies": { - "@types/react": "^17.0.0 || ^18.0.0", - "react": "^17.0.0 || ^18.0.0" + "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0", + "react": "^17.0.0 || ^18.0.0 || ^19.0.0" }, "peerDependenciesMeta": { "@types/react": { @@ -2161,17 +2180,25 @@ } } }, + "node_modules/@mui/utils/node_modules/react-is": { + "version": "19.1.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-19.1.1.tgz", + "integrity": "sha512-tr41fA15Vn8p4X9ntI+yCyeGSf1TlYaY5vlTZfQmeLBrFo3psOPX6HhTDnFNL9uj3EhP0KAQ80cugCl4b4BERA==", + "license": "MIT" + }, "node_modules/@mui/x-data-grid": { - "version": "7.22.0", - "resolved": "https://registry.npmjs.org/@mui/x-data-grid/-/x-data-grid-7.22.0.tgz", - "integrity": "sha512-gXl7+hG0YRNU3YODlPvz6Q/9+EeUsPAWn/u2YMQmYTgwAxeY5QE3lY224VRnwM5v9SfTFheo1kzAKmXPdjb9tQ==", + "version": "7.29.9", + "resolved": "https://registry.npmjs.org/@mui/x-data-grid/-/x-data-grid-7.29.9.tgz", + "integrity": "sha512-RfK7Fnuu4eyv/4eD3MEB1xxZsx0xRBsofb1kifghIjyQV1EKAeRcwvczyrzQggj7ZRT5AqkwCzhLsZDvE5O0nQ==", + "license": "MIT", "dependencies": { "@babel/runtime": "^7.25.7", - "@mui/utils": "^5.16.6 || ^6.0.0", - "@mui/x-internals": "7.21.0", + "@mui/utils": "^5.16.6 || ^6.0.0 || ^7.0.0", + "@mui/x-internals": "7.29.0", "clsx": "^2.1.1", "prop-types": "^15.8.1", - "reselect": "^5.1.1" + "reselect": "^5.1.1", + "use-sync-external-store": "^1.0.0" }, "engines": { "node": ">=14.0.0" @@ -2183,10 +2210,10 @@ "peerDependencies": { "@emotion/react": "^11.9.0", "@emotion/styled": "^11.8.1", - "@mui/material": "^5.15.14 || ^6.0.0", - "@mui/system": "^5.15.14 || ^6.0.0", - "react": "^17.0.0 || ^18.0.0", - "react-dom": "^17.0.0 || ^18.0.0" + "@mui/material": "^5.15.14 || ^6.0.0 || ^7.0.0", + "@mui/system": "^5.15.14 || ^6.0.0 || ^7.0.0", + "react": "^17.0.0 || ^18.0.0 || ^19.0.0", + "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0" }, "peerDependenciesMeta": { "@emotion/react": { @@ -2198,15 +2225,16 @@ } }, "node_modules/@mui/x-data-grid-pro": { - "version": "7.22.0", - "resolved": "https://registry.npmjs.org/@mui/x-data-grid-pro/-/x-data-grid-pro-7.22.0.tgz", - "integrity": "sha512-pOUxnJkQ1Zqs1eO7TTnUHuE8wVKMRchmahZvMaGBandy0+GFgU8YJy8S593yd43vVTA1vtDqfS+z2wG+8z968Q==", + "version": "7.29.9", + "resolved": "https://registry.npmjs.org/@mui/x-data-grid-pro/-/x-data-grid-pro-7.29.9.tgz", + "integrity": "sha512-ulh/hvvSboZZfHS+ajM0rtRTsBAmQEh519GHjkFfyTdn94o6a+4pFhhuBFN0toyj6264HV0NLs5FJp/zx+bEwA==", + "license": "SEE LICENSE IN LICENSE", "dependencies": { "@babel/runtime": "^7.25.7", - "@mui/utils": "^5.16.6 || ^6.0.0", - "@mui/x-data-grid": "7.22.0", - "@mui/x-internals": "7.21.0", - "@mui/x-license": "7.21.0", + "@mui/utils": "^5.16.6 || ^6.0.0 || ^7.0.0", + "@mui/x-data-grid": "7.29.9", + "@mui/x-internals": "7.29.0", + "@mui/x-license": "7.29.1", "@types/format-util": "^1.0.4", "clsx": "^2.1.1", "prop-types": "^15.8.1", @@ -2218,10 +2246,10 @@ "peerDependencies": { "@emotion/react": "^11.9.0", "@emotion/styled": "^11.8.1", - "@mui/material": "^5.15.14 || ^6.0.0", - "@mui/system": "^5.15.14 || ^6.0.0", - "react": "^17.0.0 || ^18.0.0", - "react-dom": "^17.0.0 || ^18.0.0" + "@mui/material": "^5.15.14 || ^6.0.0 || ^7.0.0", + "@mui/system": "^5.15.14 || ^6.0.0 || ^7.0.0", + "react": "^17.0.0 || ^18.0.0 || ^19.0.0", + "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0" }, "peerDependenciesMeta": { "@emotion/react": { @@ -2233,13 +2261,14 @@ } }, "node_modules/@mui/x-date-pickers": { - "version": "7.22.0", - "resolved": "https://registry.npmjs.org/@mui/x-date-pickers/-/x-date-pickers-7.22.0.tgz", - "integrity": "sha512-hopYo3ORP7ddYKnyBsqAtO2txEe2Zf6cehdikS5b1cqMTGOSL+18b11jfGVod9oipjb9L2JcT/WWkjoifs9Iww==", + "version": "7.29.4", + "resolved": "https://registry.npmjs.org/@mui/x-date-pickers/-/x-date-pickers-7.29.4.tgz", + "integrity": "sha512-wJ3tsqk/y6dp+mXGtT9czciAMEO5Zr3IIAHg9x6IL0Eqanqy0N3chbmQQZv3iq0m2qUpQDLvZ4utZBUTJdjNzw==", + "license": "MIT", "dependencies": { "@babel/runtime": "^7.25.7", - "@mui/utils": "^5.16.6 || ^6.0.0", - "@mui/x-internals": "7.21.0", + "@mui/utils": "^5.16.6 || ^6.0.0 || ^7.0.0", + "@mui/x-internals": "7.29.0", "@types/react-transition-group": "^4.4.11", "clsx": "^2.1.1", "prop-types": "^15.8.1", @@ -2255,17 +2284,17 @@ "peerDependencies": { "@emotion/react": "^11.9.0", "@emotion/styled": "^11.8.1", - "@mui/material": "^5.15.14 || ^6.0.0", - "@mui/system": "^5.15.14 || ^6.0.0", + "@mui/material": "^5.15.14 || ^6.0.0 || ^7.0.0", + "@mui/system": "^5.15.14 || ^6.0.0 || ^7.0.0", "date-fns": "^2.25.0 || ^3.2.0 || ^4.0.0", - "date-fns-jalali": "^2.13.0-0 || ^3.2.0-0", + "date-fns-jalali": "^2.13.0-0 || ^3.2.0-0 || ^4.0.0-0", "dayjs": "^1.10.7", "luxon": "^3.0.2", "moment": "^2.29.4", - "moment-hijri": "^2.1.2", + "moment-hijri": "^2.1.2 || ^3.0.0", "moment-jalaali": "^0.7.4 || ^0.8.0 || ^0.9.0 || ^0.10.0", - "react": "^17.0.0 || ^18.0.0", - "react-dom": "^17.0.0 || ^18.0.0" + "react": "^17.0.0 || ^18.0.0 || ^19.0.0", + "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0" }, "peerDependenciesMeta": { "@emotion/react": { @@ -2298,15 +2327,16 @@ } }, "node_modules/@mui/x-date-pickers-pro": { - "version": "7.22.0", - "resolved": "https://registry.npmjs.org/@mui/x-date-pickers-pro/-/x-date-pickers-pro-7.22.0.tgz", - "integrity": "sha512-GIUWc6jOSKnQ1xcR9IE0mOYlLVJWjJk73Ea/LJ+auT4kY0c79Jj0p+bYInC2mNN6RqbcGbhiCwQmbQCMZshIdQ==", + "version": "7.29.4", + "resolved": "https://registry.npmjs.org/@mui/x-date-pickers-pro/-/x-date-pickers-pro-7.29.4.tgz", + "integrity": "sha512-ifQliSaaLvSQLX8ys6loC0n9klza+BRbcQLC4f3/QLNC6w40sTEV3HEDJQUZChJCUk0bPqoxVuDKGTvgc02yhg==", + "license": "SEE LICENSE IN LICENSE", "dependencies": { "@babel/runtime": "^7.25.7", - "@mui/utils": "^5.16.6 || ^6.0.0", - "@mui/x-date-pickers": "7.22.0", - "@mui/x-internals": "7.21.0", - "@mui/x-license": "7.21.0", + "@mui/utils": "^5.16.6 || ^6.0.0 || ^7.0.0", + "@mui/x-date-pickers": "7.29.4", + "@mui/x-internals": "7.29.0", + "@mui/x-license": "7.29.1", "clsx": "^2.1.1", "prop-types": "^15.8.1", "react-transition-group": "^4.4.5" @@ -2317,17 +2347,17 @@ "peerDependencies": { "@emotion/react": "^11.9.0", "@emotion/styled": "^11.8.1", - "@mui/material": "^5.15.14 || ^6.0.0", - "@mui/system": "^5.15.14 || ^6.0.0", + "@mui/material": "^5.15.14 || ^6.0.0 || ^7.0.0", + "@mui/system": "^5.15.14 || ^6.0.0 || ^7.0.0", "date-fns": "^2.25.0 || ^3.2.0 || ^4.0.0", - "date-fns-jalali": "^2.13.0-0 || ^3.2.0-0", + "date-fns-jalali": "^2.13.0-0 || ^3.2.0-0 || ^4.0.0-0", "dayjs": "^1.10.7", "luxon": "^3.0.2", "moment": "^2.29.4", - "moment-hijri": "^2.1.2", + "moment-hijri": "^2.1.2 || ^3.0.0", "moment-jalaali": "^0.7.4 || ^0.8.0 || ^0.9.0 || ^0.10.0", - "react": "^17.0.0 || ^18.0.0", - "react-dom": "^17.0.0 || ^18.0.0" + "react": "^17.0.0 || ^18.0.0 || ^19.0.0", + "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0" }, "peerDependenciesMeta": { "@emotion/react": { @@ -2360,12 +2390,13 @@ } }, "node_modules/@mui/x-internals": { - "version": "7.21.0", - "resolved": "https://registry.npmjs.org/@mui/x-internals/-/x-internals-7.21.0.tgz", - "integrity": "sha512-94YNyZ0BhK5Z+Tkr90RKf47IVCW8R/1MvdUhh6MCQg6sZa74jsX+x+gEZ4kzuCqOsuyTyxikeQ8vVuCIQiP7UQ==", + "version": "7.29.0", + "resolved": "https://registry.npmjs.org/@mui/x-internals/-/x-internals-7.29.0.tgz", + "integrity": "sha512-+Gk6VTZIFD70XreWvdXBwKd8GZ2FlSCuecQFzm6znwqXg1ZsndavrhG9tkxpxo2fM1Zf7Tk8+HcOO0hCbhTQFA==", + "license": "MIT", "dependencies": { "@babel/runtime": "^7.25.7", - "@mui/utils": "^5.16.6 || ^6.0.0" + "@mui/utils": "^5.16.6 || ^6.0.0 || ^7.0.0" }, "engines": { "node": ">=14.0.0" @@ -2375,22 +2406,24 @@ "url": "https://opencollective.com/mui-org" }, "peerDependencies": { - "react": "^17.0.0 || ^18.0.0" + "react": "^17.0.0 || ^18.0.0 || ^19.0.0" } }, "node_modules/@mui/x-license": { - "version": "7.21.0", - "resolved": "https://registry.npmjs.org/@mui/x-license/-/x-license-7.21.0.tgz", - "integrity": "sha512-w48L2XQxlSdvld4E5s6pjZ5HPjtqERNun21FQtQJlodLB0JUt8pigseyC8N3X40j+Mw0Atg7UKNhf6OK/MbQ1A==", + "version": "7.29.1", + "resolved": "https://registry.npmjs.org/@mui/x-license/-/x-license-7.29.1.tgz", + "integrity": "sha512-+6D4/2IVal8Gfzu7iZS0ZJgL5cMes0gES+uK9D8I4rlMjPQ779N/rXYMe42mGQZbZuRpoqwSq6VLQx3Gr3SkLQ==", + "license": "SEE LICENSE IN LICENSE", "dependencies": { "@babel/runtime": "^7.25.7", - "@mui/utils": "^5.16.6 || ^6.0.0" + "@mui/utils": "^5.16.6 || ^6.0.0 || ^7.0.0", + "@mui/x-internals": "7.29.0" }, "engines": { "node": ">=14.0.0" }, "peerDependencies": { - "react": "^17.0.0 || ^18.0.0" + "react": "^17.0.0 || ^18.0.0 || ^19.0.0" } }, "node_modules/@mui/x-license-pro": { @@ -2532,6 +2565,172 @@ "npm": ">=6.14.0" } }, + "node_modules/@mxenabled/mx-icons": { + "version": "1.5.1", + "resolved": "https://registry.npmjs.org/@mxenabled/mx-icons/-/mx-icons-1.5.1.tgz", + "integrity": "sha512-BGnzGGEkfRb8hpWNewiSHTTLLL+jA6/p93jTBFfMFRYqBiDsJwymRYgbSWUJQqJ6YcrdKRKlE0fvQ235NXw1yQ==", + "license": "MIT", + "dependencies": { + "@emotion/react": "^11.14.0", + "@emotion/styled": "^11.14.0", + "@mui/material": "^5.16.14", + "react": "^18.3.1", + "react-dom": "^18.3.1" + } + }, + "node_modules/@mxenabled/mx-icons/node_modules/@mui/core-downloads-tracker": { + "version": "5.18.0", + "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.18.0.tgz", + "integrity": "sha512-jbhwoQ1AY200PSSOrNXmrFCaSDSJWP7qk6urkTmIirvRXDROkqe+QwcLlUiw/PrREwsIF/vm3/dAXvjlMHF0RA==", + "license": "MIT", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui-org" + } + }, + "node_modules/@mxenabled/mx-icons/node_modules/@mui/material": { + "version": "5.18.0", + "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.18.0.tgz", + "integrity": "sha512-bbH/HaJZpFtXGvWg3TsBWG4eyt3gah3E7nCNU8GLyRjVoWcA91Vm/T+sjHfUcwgJSw9iLtucfHBoq+qW/T30aA==", + "license": "MIT", + "dependencies": { + "@babel/runtime": "^7.23.9", + "@mui/core-downloads-tracker": "^5.18.0", + "@mui/system": "^5.18.0", + "@mui/types": "~7.2.15", + "@mui/utils": "^5.17.1", + "@popperjs/core": "^2.11.8", + "@types/react-transition-group": "^4.4.10", + "clsx": "^2.1.0", + "csstype": "^3.1.3", + "prop-types": "^15.8.1", + "react-is": "^19.0.0", + "react-transition-group": "^4.4.5" + }, + "engines": { + "node": ">=12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui-org" + }, + "peerDependencies": { + "@emotion/react": "^11.5.0", + "@emotion/styled": "^11.3.0", + "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0", + "react": "^17.0.0 || ^18.0.0 || ^19.0.0", + "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0" + }, + "peerDependenciesMeta": { + "@emotion/react": { + "optional": true + }, + "@emotion/styled": { + "optional": true + }, + "@types/react": { + "optional": true + } + } + }, + "node_modules/@mxenabled/mx-icons/node_modules/react-is": { + "version": "19.1.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-19.1.1.tgz", + "integrity": "sha512-tr41fA15Vn8p4X9ntI+yCyeGSf1TlYaY5vlTZfQmeLBrFo3psOPX6HhTDnFNL9uj3EhP0KAQ80cugCl4b4BERA==", + "license": "MIT" + }, + "node_modules/@mxenabled/mxui": { + "version": "1.5.3", + "resolved": "https://registry.npmjs.org/@mxenabled/mxui/-/mxui-1.5.3.tgz", + "integrity": "sha512-vXPD6Ih3B5DGTnLg3ubXbSSS+85Rplz/0lTJhZxh3hNxDkMuAliVSfJTcwZFg/6HFtBb/SL/9iWs9GS/How4ew==", + "license": "MIT", + "dependencies": { + "@emotion/react": "^11.14.0", + "@emotion/styled": "^11.14.0", + "@mui/material": "^5.16.14", + "@mui/system": "^5.16.14", + "@mui/x-data-grid-pro": "^7.27.3", + "@mui/x-date-pickers": "^7.27.3", + "@mui/x-date-pickers-pro": "^7.27.3", + "@mui/x-license-pro": "^6.10.2", + "@mxenabled/design-tokens": "^1.0.3", + "@mxenabled/mx-icons": "^1.5.1", + "date-fns": "^4.1.0", + "react": "^18.3.1", + "react-dom": "^18.3.1" + }, + "peerDependencies": { + "@mui/material": "^5", + "@mui/x-data-grid-pro": "^7", + "@mui/x-date-pickers": "^7", + "@mui/x-date-pickers-pro": "^7", + "@mxenabled/mxui": "^1", + "date-fns": "^4", + "react": "^18", + "react-dom": "^18" + } + }, + "node_modules/@mxenabled/mxui/node_modules/@mui/core-downloads-tracker": { + "version": "5.18.0", + "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.18.0.tgz", + "integrity": "sha512-jbhwoQ1AY200PSSOrNXmrFCaSDSJWP7qk6urkTmIirvRXDROkqe+QwcLlUiw/PrREwsIF/vm3/dAXvjlMHF0RA==", + "license": "MIT", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui-org" + } + }, + "node_modules/@mxenabled/mxui/node_modules/@mui/material": { + "version": "5.18.0", + "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.18.0.tgz", + "integrity": "sha512-bbH/HaJZpFtXGvWg3TsBWG4eyt3gah3E7nCNU8GLyRjVoWcA91Vm/T+sjHfUcwgJSw9iLtucfHBoq+qW/T30aA==", + "license": "MIT", + "dependencies": { + "@babel/runtime": "^7.23.9", + "@mui/core-downloads-tracker": "^5.18.0", + "@mui/system": "^5.18.0", + "@mui/types": "~7.2.15", + "@mui/utils": "^5.17.1", + "@popperjs/core": "^2.11.8", + "@types/react-transition-group": "^4.4.10", + "clsx": "^2.1.0", + "csstype": "^3.1.3", + "prop-types": "^15.8.1", + "react-is": "^19.0.0", + "react-transition-group": "^4.4.5" + }, + "engines": { + "node": ">=12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui-org" + }, + "peerDependencies": { + "@emotion/react": "^11.5.0", + "@emotion/styled": "^11.3.0", + "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0", + "react": "^17.0.0 || ^18.0.0 || ^19.0.0", + "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0" + }, + "peerDependenciesMeta": { + "@emotion/react": { + "optional": true + }, + "@emotion/styled": { + "optional": true + }, + "@types/react": { + "optional": true + } + } + }, + "node_modules/@mxenabled/mxui/node_modules/react-is": { + "version": "19.1.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-19.1.1.tgz", + "integrity": "sha512-tr41fA15Vn8p4X9ntI+yCyeGSf1TlYaY5vlTZfQmeLBrFo3psOPX6HhTDnFNL9uj3EhP0KAQ80cugCl4b4BERA==", + "license": "MIT" + }, "node_modules/@nicolo-ribaudo/eslint-scope-5-internals": { "version": "5.1.1-v1", "resolved": "https://registry.npmjs.org/@nicolo-ribaudo/eslint-scope-5-internals/-/eslint-scope-5-internals-5.1.1-v1.tgz", @@ -4258,9 +4457,10 @@ "integrity": "sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==" }, "node_modules/@types/prop-types": { - "version": "15.7.13", - "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.13.tgz", - "integrity": "sha512-hCZTSvwbzWGvhqxp/RqVqwU999pBf2vp7hzIjiYOsl8wqOmUxkQ6ddw1cV3l8811+kdUFus/q4d1Y3E3SyEifA==" + "version": "15.7.15", + "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.15.tgz", + "integrity": "sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw==", + "license": "MIT" }, "node_modules/@types/react": { "version": "18.3.4", @@ -4281,10 +4481,11 @@ } }, "node_modules/@types/react-transition-group": { - "version": "4.4.11", - "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.11.tgz", - "integrity": "sha512-RM05tAniPZ5DZPzzNFP+DmrcOdD0efDUxMy3145oljWSl3x9ZV5vhme98gTxFrj2lhXvmGNnUiuDyJgY9IKkNA==", - "dependencies": { + "version": "4.4.12", + "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.12.tgz", + "integrity": "sha512-8TV6R3h2j7a91c+1DXdJi3Syo69zzIZbz7Lg5tORM5LEJG7X/E6a1V3drRyBRZq7/utz7A+c4OgYLiLcYGHG6w==", + "license": "MIT", + "peerDependencies": { "@types/react": "*" } }, diff --git a/package.json b/package.json index 1edeceab98..0ee2daa8c8 100644 --- a/package.json +++ b/package.json @@ -27,8 +27,8 @@ "publish:major": "npm run testAndBuild && npm version major && git push && git push origin --tags && npm publish" }, "dependencies": { - "@emotion/react": "^11.13.0", - "@emotion/styled": "^11.13.0", + "@emotion/react": "^11.14.0", + "@emotion/styled": "^11.14.1", "@kyper/button": "^4.0.0", "@kyper/hooks": "^1.0.0", "@kyper/icon": "^1.18.1", @@ -45,7 +45,8 @@ "@kyper/userfeedback": "^2.0.0", "@kyper/utilityrow": "^2.1.0", "@mui/icons-material": "^6.1.5", - "@mui/material": "^6.1.5", + "@mui/material": "^6.5.0", + "@mxenabled/mxui": "^1.5.3", "@reduxjs/toolkit": "^2.2.7", "@types/node": "^22.1.0", "axios": "^1.8.4", @@ -118,6 +119,8 @@ } }, "release": { - "branches": ["master"] + "branches": [ + "master" + ] } } diff --git a/src/components/ConnectBackgroundImage.tsx b/src/components/ConnectBackgroundImage.tsx index 2dc2e6b483..2c2ad2d026 100644 --- a/src/components/ConnectBackgroundImage.tsx +++ b/src/components/ConnectBackgroundImage.tsx @@ -1,6 +1,5 @@ import React from 'react' import { useSelector } from 'react-redux' -import { useTokens } from '@kyper/tokenprovider' import { COLOR_SCHEME } from 'src/const/Connect' import { selectColorScheme } from 'src/redux/reducers/configSlice' import ConnectHeaderBackdropDark from 'src/images/header/ConnectHeaderBackdropDark.svg' @@ -8,15 +7,10 @@ import ConnectHeaderBackdropLight from 'src/images/header/ConnectHeaderBackdropL export const ConnectBackgroundImage = () => { const colorScheme = useSelector(selectColorScheme) - const tokens = useTokens() - return ( -
- {colorScheme === COLOR_SCHEME.LIGHT ? ( - - ) : ( - - )} -
+ return colorScheme === COLOR_SCHEME.LIGHT ? ( + + ) : ( + ) } diff --git a/src/components/ConnectLogoHeader.tsx b/src/components/ConnectLogoHeader.tsx index 59c144db67..b5cf1cf595 100644 --- a/src/components/ConnectLogoHeader.tsx +++ b/src/components/ConnectLogoHeader.tsx @@ -12,7 +12,6 @@ import { ClientLogo } from 'src/components/ClientLogo' import ConnectHeaderInstitutionLight from 'src/images/header/ConnectHeaderInstitutionLight.svg' import ConnectHeaderInstitutionDark from 'src/images/header/ConnectHeaderInstitutionDark.svg' -import { ConnectBackgroundImage } from './ConnectBackgroundImage' interface ConnectLogoHeaderProps { institution?: { @@ -39,9 +38,6 @@ export const ConnectLogoHeader: React.FC = (props) => { return (
-
- -
@@ -75,12 +71,6 @@ const getStyles = () => { height: maxHeight, width: maxWidth, }, - backdropImage: { - width: '88px', - position: 'absolute', - height: '80px', - zIndex: 10, - } as React.CSSProperties, device: { height: maxHeight, width: maxHeight, @@ -97,11 +87,5 @@ const getStyles = () => { marginLeft: '80px', zIndex: 20, }, - aggregatorLogo: { - width: '88px', - height: '80px', - zIndex: 10, - position: 'relative', - } as React.CSSProperties, } } diff --git a/src/views/connecting/Connecting.js b/src/views/connecting/Connecting.js index 96b1b91e73..b288313498 100644 --- a/src/views/connecting/Connecting.js +++ b/src/views/connecting/Connecting.js @@ -13,8 +13,6 @@ import { retry, } from 'rxjs/operators' import { useSelector, useDispatch } from 'react-redux' - -import { Text } from '@kyper/mui' import { useTokens } from '@kyper/tokenprovider' import { SlideDown } from 'src/components/SlideDown' @@ -47,6 +45,8 @@ import useAnalyticsEvent from 'src/hooks/useAnalyticsEvent' import { POST_MESSAGES } from 'src/const/postMessages' import { AnalyticContext } from 'src/Connect' import { PostMessageContext } from 'src/ConnectWidget' +import { Text } from '@kyper/mui' +import { Stack } from '@mui/material' export const Connecting = (props) => { const { @@ -328,12 +328,17 @@ export const Connecting = (props) => { return (
-
- -
- - {__('Connecting to', institution.name)} - + + + + {__('Connecting to')} + + {institution.name} + +
+ +
+ @@ -346,18 +351,12 @@ export const Connecting = (props) => { const getStyles = (tokens) => ({ container: { + marginTop: 16, textAlign: 'center', }, - logoHeader: { - marginTop: tokens.Spacing.Medium, - marginBottom: tokens.Spacing.Small, - }, message: { marginTop: tokens.Spacing.XLarge, }, - subHeader: { - paddingTop: tokens.Spacing.Large, - }, spinner: { marginTop: tokens.Spacing.XLarge, }, diff --git a/src/views/connecting/progress/ProgressBar.js b/src/views/connecting/progress/ProgressBar.js index a1154a6d11..fb2d072acf 100644 --- a/src/views/connecting/progress/ProgressBar.js +++ b/src/views/connecting/progress/ProgressBar.js @@ -8,12 +8,18 @@ import { ProgressCheckMark } from 'src/views/connecting/progress/ProgressCheckMa import { ProgressCircle } from 'src/views/connecting/progress/ProgressCircle' import { ProgressMessage } from 'src/views/connecting/progress/ProgressMessage' -import { JOB_STATUSES } from 'src/const/consts' import * as JobSchedule from 'src/utilities/JobSchedule' +import { ConnectBackgroundImage } from 'src/components/ConnectBackgroundImage' export const ProgressBar = (props) => { const tokens = useTokens() const styles = { + backgroundImage: { + height: 80, + position: 'absolute', + width: 80, + zIndex: 1, + }, container: { margin: `0 auto`, maxWidth: '320px', // this is somewhat arbitrary, not based on a token @@ -37,31 +43,22 @@ export const ProgressBar = (props) => { } const allDone = JobSchedule.areAllJobsDone(props.jobSchedule) const activeJob = JobSchedule.getActiveJob(props.jobSchedule) - // If we have 3+ jobs, space the circles at 16px. Otherwise 24px - const innerLineWidth = props.jobSchedule.jobs.length >= 3 ? 16 : 24 return (
+
+ +
- {props.jobSchedule.jobs.map((job) => { - const isActive = job.status === JOB_STATUSES.ACTIVE - const isDone = job.status === JOB_STATUSES.DONE - const shouldBeHighlighted = isActive || isDone - - return ( - - - - - ) - })} - + + {activeJob ? : } + {allDone ? : }
- +
) } diff --git a/src/views/connecting/progress/ProgressLine.js b/src/views/connecting/progress/ProgressLine.js deleted file mode 100644 index bde8868279..0000000000 --- a/src/views/connecting/progress/ProgressLine.js +++ /dev/null @@ -1,30 +0,0 @@ -import React from 'react' -import PropTypes from 'prop-types' -import { useTokens } from '@kyper/tokenprovider' - -export const ProgressLine = (props) => { - const tokens = useTokens() - const styles = { - backLine: { - width: props.width ? `${props.width}px` : '100%', - minWidth: props.width ? `${props.width}px` : null, - height: '2px', - background: tokens.BackgroundColor.HrDark, - borderRadius: '1px', - zIndex: 10, - }, - activeLine: { - background: tokens.TextColor.Active, - }, - } - const lineStyle = props.isActive - ? { ...styles.backLine, ...styles.activeLine } - : { ...styles.backLine } - - return
-} - -ProgressLine.propTypes = { - isActive: PropTypes.bool, - width: PropTypes.number, -} diff --git a/src/views/connecting/progress/ProgressLine.tsx b/src/views/connecting/progress/ProgressLine.tsx new file mode 100644 index 0000000000..0589e29231 --- /dev/null +++ b/src/views/connecting/progress/ProgressLine.tsx @@ -0,0 +1,28 @@ +import React from 'react' +import { useTokens } from '@kyper/tokenprovider' + +export const ProgressLine = ({ + isActive, + isCentralLine, +}: { + isActive: boolean + isCentralLine?: boolean +}) => { + const tokens = useTokens() + const styles = { + backLine: { + width: isCentralLine ? '16px' : '100%', + minWidth: isCentralLine ? `16px` : undefined, + height: '2px', + background: tokens.BackgroundColor.HrDark, + borderRadius: '1px', + zIndex: 10, + }, + activeLine: { + background: tokens.TextColor.Active, + }, + } + const lineStyle = isActive ? { ...styles.backLine, ...styles.activeLine } : { ...styles.backLine } + + return
+} diff --git a/src/views/connecting/progress/ProgressMessage.js b/src/views/connecting/progress/ProgressMessage.js index d518ab594f..0372c15feb 100644 --- a/src/views/connecting/progress/ProgressMessage.js +++ b/src/views/connecting/progress/ProgressMessage.js @@ -15,7 +15,7 @@ const subMessages = [ __('Still working. Stay with us!'), ] -export const ProgressMessage = (props) => { +export const ProgressMessage = ({ allDone, jobType }) => { const tokens = useTokens() const styles = { messageText: { @@ -37,15 +37,15 @@ export const ProgressMessage = (props) => { .subscribe((message) => setSubTitle(message)) return () => messageCycle$.unsubscribe() - }, [props.job?.type]) + }, [jobType]) let mainMessage = __('Syncing your information.') - if (props.job?.type === JOB_TYPES.VERIFICATION) { + if (jobType === JOB_TYPES.VERIFICATION) { mainMessage = __('Getting verification data.') - } else if (props.job?.type === JOB_TYPES.IDENTIFICATION) { + } else if (jobType === JOB_TYPES.IDENTIFICATION) { mainMessage = __('Getting identification data.') - } else if (props.allDone) { + } else if (allDone) { mainMessage = __('Finishing up.') } @@ -63,5 +63,5 @@ export const ProgressMessage = (props) => { ProgressMessage.propTypes = { allDone: PropTypes.bool, - job: PropTypes.object, + jobType: PropTypes.string, } From e0811343b9b1196301e2f6e53484e7617ad9bac1 Mon Sep 17 00:00:00 2001 From: Wes Risenmay Date: Tue, 19 Aug 2025 08:33:23 -0600 Subject: [PATCH 04/12] put logos on the progress bar --- src/components/ConnectLogoHeader.tsx | 2 + src/redux/reducers/profilesSlice.tsx | 11 +++- src/views/connecting/Connecting.js | 9 +--- .../{ProgressBar.js => ProgressBar.tsx} | 53 +++++++++++++------ .../connecting/progress/ProgressLogo.tsx | 24 +++++++++ 5 files changed, 74 insertions(+), 25 deletions(-) rename src/views/connecting/progress/{ProgressBar.js => ProgressBar.tsx} (56%) create mode 100644 src/views/connecting/progress/ProgressLogo.tsx diff --git a/src/components/ConnectLogoHeader.tsx b/src/components/ConnectLogoHeader.tsx index b5cf1cf595..d2bc490e09 100644 --- a/src/components/ConnectLogoHeader.tsx +++ b/src/components/ConnectLogoHeader.tsx @@ -36,6 +36,8 @@ export const ConnectLogoHeader: React.FC = (props) => {
) + // TODO: This looks like it's used in multiple places. I probably need to leave this component how it was, and just change it for the connecting screen + return (
diff --git a/src/redux/reducers/profilesSlice.tsx b/src/redux/reducers/profilesSlice.tsx index b3203bf853..4ed1afa3ab 100644 --- a/src/redux/reducers/profilesSlice.tsx +++ b/src/redux/reducers/profilesSlice.tsx @@ -1,4 +1,4 @@ -import { createSlice } from '@reduxjs/toolkit' +import { createSelector, createSlice } from '@reduxjs/toolkit' const initialState: ProfilesTypes = { loading: true, @@ -56,3 +56,12 @@ const profilesSlice = createSlice({ export const { loadProfiles, loadWidgetProfile, updateUserProfile } = profilesSlice.actions export default profilesSlice.reducer + +export const getProfilesSlice = createSelector( + (state) => state, + (state) => state.profiles, +) + +export const getClient = createSelector(getProfilesSlice, (profiles) => profiles.client) + +export const getClientGuid = createSelector(getClient, (client) => client.guid) diff --git a/src/views/connecting/Connecting.js b/src/views/connecting/Connecting.js index b288313498..7dea4353e2 100644 --- a/src/views/connecting/Connecting.js +++ b/src/views/connecting/Connecting.js @@ -19,7 +19,6 @@ import { SlideDown } from 'src/components/SlideDown' import { getDelay } from 'src/utilities/getDelay' import { pollMember, CONNECTING_MESSAGES } from 'src/utilities/pollers' import { STEPS } from 'src/const/Connect' -import { ConnectLogoHeader } from 'src/components/ConnectLogoHeader' import { ProgressBar } from 'src/views/connecting/progress/ProgressBar' import * as JobSchedule from 'src/utilities/JobSchedule' import { AriaLive } from 'src/components/AriaLive' @@ -335,15 +334,9 @@ export const Connecting = (props) => { {institution.name} -
- -
+ - - - -
) diff --git a/src/views/connecting/progress/ProgressBar.js b/src/views/connecting/progress/ProgressBar.tsx similarity index 56% rename from src/views/connecting/progress/ProgressBar.js rename to src/views/connecting/progress/ProgressBar.tsx index fb2d072acf..d8b818e1d9 100644 --- a/src/views/connecting/progress/ProgressBar.js +++ b/src/views/connecting/progress/ProgressBar.tsx @@ -1,5 +1,4 @@ import React from 'react' -import PropTypes from 'prop-types' import { useTokens } from '@kyper/tokenprovider' import { Spinner } from '@kyper/progressindicators' @@ -10,19 +9,32 @@ import { ProgressMessage } from 'src/views/connecting/progress/ProgressMessage' import * as JobSchedule from 'src/utilities/JobSchedule' import { ConnectBackgroundImage } from 'src/components/ConnectBackgroundImage' +import { ClientLogo } from 'src/components/ClientLogo' +import { useSelector } from 'react-redux' +import { getClientGuid } from 'src/redux/reducers/profilesSlice' +import { ProgressLogo } from './ProgressLogo' +import { InstitutionLogo } from '@mxenabled/mxui' +import { Stack } from '@mui/material' -export const ProgressBar = (props) => { +export const ProgressBar = ({ + institution, + jobSchedule, +}: { + institution: { guid: string; logo_url: string } + jobSchedule: { isInitialized: boolean } +}) => { const tokens = useTokens() + + const clientGuid = useSelector(getClientGuid) + const styles = { backgroundImage: { - height: 80, + height: '80px', position: 'absolute', - width: 80, + width: '80px', zIndex: 1, }, container: { - margin: `0 auto`, - maxWidth: '320px', // this is somewhat arbitrary, not based on a token textAlign: 'center', }, barContainer: { @@ -31,25 +43,38 @@ export const ProgressBar = (props) => { margin: `${tokens.Spacing.Large}px auto`, justifyContent: 'center', }, - } + logo: { border: 'solid 1px rgba(0, 0, 0, 0.25)', borderRadius: '8px' }, + } as const // if we don't have the schedule initialized just show a spinner. - if (props.jobSchedule.isInitialized === false) { + if (jobSchedule.isInitialized === false) { return (
) } - const allDone = JobSchedule.areAllJobsDone(props.jobSchedule) - const activeJob = JobSchedule.getActiveJob(props.jobSchedule) + const allDone = JobSchedule.areAllJobsDone(jobSchedule) + const activeJob = JobSchedule.getActiveJob(jobSchedule) return ( -
+
+ + + + + + @@ -59,10 +84,6 @@ export const ProgressBar = (props) => {
-
+ ) } - -ProgressBar.propTypes = { - jobSchedule: PropTypes.object.isRequired, -} diff --git a/src/views/connecting/progress/ProgressLogo.tsx b/src/views/connecting/progress/ProgressLogo.tsx new file mode 100644 index 0000000000..6bb9ff560d --- /dev/null +++ b/src/views/connecting/progress/ProgressLogo.tsx @@ -0,0 +1,24 @@ +import React, { ReactNode } from 'react' + +export const ProgressLogo = ({ + children, + containerStyle, +}: { + children: ReactNode + containerStyle: { + left?: string + right?: string + } +}) => { + const styles = { + container: { + backgroundColor: '#FFF', + borderRadius: '8px', + ...containerStyle, + position: 'absolute', + zIndex: 11, + }, + } as const + + return
{children}
+} From 5ea4dbc72e56e49203c2adae93a1d86a3998178c Mon Sep 17 00:00:00 2001 From: Wes Risenmay Date: Tue, 19 Aug 2025 11:11:03 -0600 Subject: [PATCH 05/12] moved logos into a logos container --- src/views/connecting/progress/ProgressBar.tsx | 51 ++++++++++++------- .../connecting/progress/ProgressCircle.js | 2 + .../connecting/progress/ProgressLogo.tsx | 16 ++---- 3 files changed, 38 insertions(+), 31 deletions(-) diff --git a/src/views/connecting/progress/ProgressBar.tsx b/src/views/connecting/progress/ProgressBar.tsx index d8b818e1d9..d2dcd7cdce 100644 --- a/src/views/connecting/progress/ProgressBar.tsx +++ b/src/views/connecting/progress/ProgressBar.tsx @@ -27,23 +27,34 @@ export const ProgressBar = ({ const clientGuid = useSelector(getClientGuid) + const logoPadding = '28px' + const backgroundImageHeight = '80px' + const styles = { backgroundImage: { - height: '80px', - position: 'absolute', - width: '80px', + height: backgroundImageHeight, + width: backgroundImageHeight, zIndex: 1, }, container: { textAlign: 'center', }, barContainer: { - display: 'flex', alignItems: 'center', - margin: `${tokens.Spacing.Large}px auto`, + display: 'flex', + height: backgroundImageHeight, justifyContent: 'center', }, logo: { border: 'solid 1px rgba(0, 0, 0, 0.25)', borderRadius: '8px' }, + logosContainer: { + alignItems: 'center', + display: 'flex', + justifyContent: 'space-between', + paddingLeft: logoPadding, + paddingRight: logoPadding, + position: 'absolute', + width: `calc(100% - ${logoPadding} - ${logoPadding})`, + }, } as const // if we don't have the schedule initialized just show a spinner. @@ -60,21 +71,23 @@ export const ProgressBar = ({ return (
-
- +
+ + + +
+ +
+ + +
- - - - - - diff --git a/src/views/connecting/progress/ProgressCircle.js b/src/views/connecting/progress/ProgressCircle.js index ac041c7ed7..31207bd897 100644 --- a/src/views/connecting/progress/ProgressCircle.js +++ b/src/views/connecting/progress/ProgressCircle.js @@ -14,6 +14,8 @@ export const ProgressCircle = (props) => { borderColor: tokens.TextColor.Active, }, circle: { + // TODO: Change this for dark mode + backgroundColor: '#FFF', boxSizing: 'border-box', height: '24px', width: '24px', diff --git a/src/views/connecting/progress/ProgressLogo.tsx b/src/views/connecting/progress/ProgressLogo.tsx index 6bb9ff560d..9da7d4fd51 100644 --- a/src/views/connecting/progress/ProgressLogo.tsx +++ b/src/views/connecting/progress/ProgressLogo.tsx @@ -1,21 +1,13 @@ import React, { ReactNode } from 'react' -export const ProgressLogo = ({ - children, - containerStyle, -}: { - children: ReactNode - containerStyle: { - left?: string - right?: string - } -}) => { +export const ProgressLogo = ({ children }: { children: ReactNode }) => { const styles = { container: { + // TODO: This background color needs to be different in dark mode backgroundColor: '#FFF', borderRadius: '8px', - ...containerStyle, - position: 'absolute', + display: 'flex', + padding: '2px', zIndex: 11, }, } as const From db8ae666a2abbaa5c97068f7b689ecfcc5ed643c Mon Sep 17 00:00:00 2001 From: Wes Risenmay Date: Tue, 19 Aug 2025 11:21:23 -0600 Subject: [PATCH 06/12] reverting some changes to the ConnectLogoHeader --- src/components/ConnectBackgroundImage.tsx | 16 ---------- src/components/ConnectLogoHeader.tsx | 30 +++++++++++++------ .../progress/ProgressBackdropDark.svg} | 0 .../progress/ProgressBackdropLight.svg} | 0 .../progress/ProgressBackgroundImage.tsx | 12 ++++++++ src/views/connecting/progress/ProgressBar.tsx | 4 +-- 6 files changed, 35 insertions(+), 27 deletions(-) delete mode 100644 src/components/ConnectBackgroundImage.tsx rename src/{images/header/ConnectHeaderBackdropDark.svg => views/connecting/progress/ProgressBackdropDark.svg} (100%) rename src/{images/header/ConnectHeaderBackdropLight.svg => views/connecting/progress/ProgressBackdropLight.svg} (100%) create mode 100644 src/views/connecting/progress/ProgressBackgroundImage.tsx diff --git a/src/components/ConnectBackgroundImage.tsx b/src/components/ConnectBackgroundImage.tsx deleted file mode 100644 index 2c2ad2d026..0000000000 --- a/src/components/ConnectBackgroundImage.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import React from 'react' -import { useSelector } from 'react-redux' -import { COLOR_SCHEME } from 'src/const/Connect' -import { selectColorScheme } from 'src/redux/reducers/configSlice' -import ConnectHeaderBackdropDark from 'src/images/header/ConnectHeaderBackdropDark.svg' -import ConnectHeaderBackdropLight from 'src/images/header/ConnectHeaderBackdropLight.svg' - -export const ConnectBackgroundImage = () => { - const colorScheme = useSelector(selectColorScheme) - - return colorScheme === COLOR_SCHEME.LIGHT ? ( - - ) : ( - - ) -} diff --git a/src/components/ConnectLogoHeader.tsx b/src/components/ConnectLogoHeader.tsx index d2bc490e09..6bfe31b173 100644 --- a/src/components/ConnectLogoHeader.tsx +++ b/src/components/ConnectLogoHeader.tsx @@ -13,11 +13,12 @@ import { ClientLogo } from 'src/components/ClientLogo' import ConnectHeaderInstitutionLight from 'src/images/header/ConnectHeaderInstitutionLight.svg' import ConnectHeaderInstitutionDark from 'src/images/header/ConnectHeaderInstitutionDark.svg' +import ConnectHeaderBackdropDark from 'src/images/header/ConnectHeaderBackdropDark.svg' +import ConnectHeaderBackdropLight from 'src/images/header/ConnectHeaderBackdropLight.svg' + interface ConnectLogoHeaderProps { - institution?: { - guid?: string - logo_url?: string - } + institutionGuid?: string + institutionLogo?: string } export const ConnectLogoHeader: React.FC = (props) => { @@ -36,19 +37,24 @@ export const ConnectLogoHeader: React.FC = (props) => {
) - // TODO: This looks like it's used in multiple places. I probably need to leave this component how it was, and just change it for the connecting screen - return (
+
+ {colorScheme === COLOR_SCHEME.LIGHT ? ( + + ) : ( + + )} +
- {props?.institution?.guid ? ( + {props.institutionGuid ? ( @@ -73,6 +79,12 @@ const getStyles = () => { height: maxHeight, width: maxWidth, }, + backdropImage: { + width: '88px', + position: 'absolute', + height: '80px', + zIndex: 10, + } as React.CSSProperties, device: { height: maxHeight, width: maxHeight, diff --git a/src/images/header/ConnectHeaderBackdropDark.svg b/src/views/connecting/progress/ProgressBackdropDark.svg similarity index 100% rename from src/images/header/ConnectHeaderBackdropDark.svg rename to src/views/connecting/progress/ProgressBackdropDark.svg diff --git a/src/images/header/ConnectHeaderBackdropLight.svg b/src/views/connecting/progress/ProgressBackdropLight.svg similarity index 100% rename from src/images/header/ConnectHeaderBackdropLight.svg rename to src/views/connecting/progress/ProgressBackdropLight.svg diff --git a/src/views/connecting/progress/ProgressBackgroundImage.tsx b/src/views/connecting/progress/ProgressBackgroundImage.tsx new file mode 100644 index 0000000000..0ffbab8b92 --- /dev/null +++ b/src/views/connecting/progress/ProgressBackgroundImage.tsx @@ -0,0 +1,12 @@ +import React from 'react' +import { useSelector } from 'react-redux' +import { COLOR_SCHEME } from 'src/const/Connect' +import { selectColorScheme } from 'src/redux/reducers/configSlice' +import ProgressBackdropDark from './ProgressBackdropDark.svg' +import ProgressBackdropLight from './ProgressBackdropLight.svg' + +export const ProgressBackgroundImage = () => { + const colorScheme = useSelector(selectColorScheme) + + return colorScheme === COLOR_SCHEME.LIGHT ? : +} diff --git a/src/views/connecting/progress/ProgressBar.tsx b/src/views/connecting/progress/ProgressBar.tsx index d2dcd7cdce..915b45f30e 100644 --- a/src/views/connecting/progress/ProgressBar.tsx +++ b/src/views/connecting/progress/ProgressBar.tsx @@ -8,13 +8,13 @@ import { ProgressCircle } from 'src/views/connecting/progress/ProgressCircle' import { ProgressMessage } from 'src/views/connecting/progress/ProgressMessage' import * as JobSchedule from 'src/utilities/JobSchedule' -import { ConnectBackgroundImage } from 'src/components/ConnectBackgroundImage' import { ClientLogo } from 'src/components/ClientLogo' import { useSelector } from 'react-redux' import { getClientGuid } from 'src/redux/reducers/profilesSlice' import { ProgressLogo } from './ProgressLogo' import { InstitutionLogo } from '@mxenabled/mxui' import { Stack } from '@mui/material' +import { ProgressBackgroundImage } from './ProgressBackgroundImage' export const ProgressBar = ({ institution, @@ -76,7 +76,7 @@ export const ProgressBar = ({
- +
Date: Tue, 19 Aug 2025 11:24:09 -0600 Subject: [PATCH 07/12] add previous images for other connect logo headers --- .../header/ConnectHeaderBackdropDark.svg | 50 +++++++++++++++++++ .../header/ConnectHeaderBackdropLight.svg | 50 +++++++++++++++++++ 2 files changed, 100 insertions(+) create mode 100644 src/images/header/ConnectHeaderBackdropDark.svg create mode 100644 src/images/header/ConnectHeaderBackdropLight.svg diff --git a/src/images/header/ConnectHeaderBackdropDark.svg b/src/images/header/ConnectHeaderBackdropDark.svg new file mode 100644 index 0000000000..6b282651df --- /dev/null +++ b/src/images/header/ConnectHeaderBackdropDark.svg @@ -0,0 +1,50 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/header/ConnectHeaderBackdropLight.svg b/src/images/header/ConnectHeaderBackdropLight.svg new file mode 100644 index 0000000000..6b7a2408df --- /dev/null +++ b/src/images/header/ConnectHeaderBackdropLight.svg @@ -0,0 +1,50 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + From fe3f66c448c3ae1729391b02b374495af3bc8dc8 Mon Sep 17 00:00:00 2001 From: Wes Risenmay Date: Tue, 19 Aug 2025 11:26:08 -0600 Subject: [PATCH 08/12] revert to old test file --- src/components/__tests__/ConnectLogoHeader-test.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/__tests__/ConnectLogoHeader-test.tsx b/src/components/__tests__/ConnectLogoHeader-test.tsx index 8b34ddbff3..de6041fbc1 100644 --- a/src/components/__tests__/ConnectLogoHeader-test.tsx +++ b/src/components/__tests__/ConnectLogoHeader-test.tsx @@ -43,7 +43,7 @@ describe('ConnectLogoHeader', () => { it('renders a custom logoUrl if an institutionGuid and institutionLogo was passed in props', () => { const logoUrl = 'testUrl' - render(, { + render(, { preloadedState: initialState, }) @@ -53,7 +53,7 @@ describe('ConnectLogoHeader', () => { it('renders an InstitutionLogo if an institutionGuid was passed in props', () => { const institutionGuid = 'INS-123' - render(, { + render(, { preloadedState: initialState, }) From 48aa677acc2b66e7a526083a2a005fa6f8b32542 Mon Sep 17 00:00:00 2001 From: Wes Risenmay Date: Wed, 20 Aug 2025 09:04:34 -0600 Subject: [PATCH 09/12] converting to css modules --- src/ConnectWidget.tsx | 1 + src/redux/reducers/configSlice.ts | 14 ++++- src/sharedVariables.css | 3 ++ .../progress/ProgressBackgroundImage.tsx | 13 +++-- src/views/connecting/progress/ProgressBar.tsx | 53 +++++-------------- .../progress/progressBar.module.css | 32 +++++++++++ 6 files changed, 71 insertions(+), 45 deletions(-) create mode 100644 src/sharedVariables.css create mode 100644 src/views/connecting/progress/progressBar.module.css diff --git a/src/ConnectWidget.tsx b/src/ConnectWidget.tsx index d663d4ec24..389a40e163 100644 --- a/src/ConnectWidget.tsx +++ b/src/ConnectWidget.tsx @@ -9,6 +9,7 @@ import { initGettextLocaleData } from 'src/utilities/Personalization' import { ConnectedTokenProvider } from 'src/ConnectedTokenProvider' import { TooSmallDialog } from 'src/components/app/TooSmallDialog' import { setLocalizedContent } from 'src/redux/reducers/localizedContentSlice' +import './sharedVariables.css' interface PostMessageContextType { postMessageEventOverrides?: PostMessageEventOverrides diff --git a/src/redux/reducers/configSlice.ts b/src/redux/reducers/configSlice.ts index 202b2efbb7..58ac8052c9 100644 --- a/src/redux/reducers/configSlice.ts +++ b/src/redux/reducers/configSlice.ts @@ -1,7 +1,14 @@ import { RootState } from 'src/redux/Store' import { createSelector, createSlice, PayloadAction } from '@reduxjs/toolkit' import { ActionTypes as ConnectActionTypes } from 'src/redux/actions/Connect' -import { AGG_MODE, REFERRAL_SOURCES, VERIFY_MODE, REWARD_MODE, STEPS } from 'src/const/Connect' +import { + AGG_MODE, + REFERRAL_SOURCES, + VERIFY_MODE, + REWARD_MODE, + STEPS, + COLOR_SCHEME, +} from 'src/const/Connect' import { COMBO_JOB_DATA_TYPES } from 'src/const/comboJobDataTypes' const initialState: ClientConfigType = { @@ -178,6 +185,11 @@ export const selectConnectConfig = createSelector(selectConfig, (config) => ({ export const selectColorScheme = (state: RootState) => state.config.color_scheme +export const getIsLightColorScheme = createSelector( + selectColorScheme, + (colorScheme) => colorScheme === COLOR_SCHEME.LIGHT, +) + // Helpers const getProductDeterminedMode = (config: { data_request?: { products?: string[] | null } | null diff --git a/src/sharedVariables.css b/src/sharedVariables.css new file mode 100644 index 0000000000..7361e218b5 --- /dev/null +++ b/src/sharedVariables.css @@ -0,0 +1,3 @@ +:root { + --progress-bar-background-image-height: 80px; +} diff --git a/src/views/connecting/progress/ProgressBackgroundImage.tsx b/src/views/connecting/progress/ProgressBackgroundImage.tsx index 0ffbab8b92..81c60bf134 100644 --- a/src/views/connecting/progress/ProgressBackgroundImage.tsx +++ b/src/views/connecting/progress/ProgressBackgroundImage.tsx @@ -1,12 +1,15 @@ import React from 'react' import { useSelector } from 'react-redux' -import { COLOR_SCHEME } from 'src/const/Connect' -import { selectColorScheme } from 'src/redux/reducers/configSlice' +import { getIsLightColorScheme } from 'src/redux/reducers/configSlice' import ProgressBackdropDark from './ProgressBackdropDark.svg' import ProgressBackdropLight from './ProgressBackdropLight.svg' -export const ProgressBackgroundImage = () => { - const colorScheme = useSelector(selectColorScheme) +export const ProgressBackgroundImage = ({ className }: { className: string }) => { + const isLightColorScheme = useSelector(getIsLightColorScheme) - return colorScheme === COLOR_SCHEME.LIGHT ? : + return ( +
+ {isLightColorScheme ? : } +
+ ) } diff --git a/src/views/connecting/progress/ProgressBar.tsx b/src/views/connecting/progress/ProgressBar.tsx index 915b45f30e..32106a4505 100644 --- a/src/views/connecting/progress/ProgressBar.tsx +++ b/src/views/connecting/progress/ProgressBar.tsx @@ -15,6 +15,7 @@ import { ProgressLogo } from './ProgressLogo' import { InstitutionLogo } from '@mxenabled/mxui' import { Stack } from '@mui/material' import { ProgressBackgroundImage } from './ProgressBackgroundImage' +import styles from './progressBar.module.css' export const ProgressBar = ({ institution, @@ -27,40 +28,10 @@ export const ProgressBar = ({ const clientGuid = useSelector(getClientGuid) - const logoPadding = '28px' - const backgroundImageHeight = '80px' - - const styles = { - backgroundImage: { - height: backgroundImageHeight, - width: backgroundImageHeight, - zIndex: 1, - }, - container: { - textAlign: 'center', - }, - barContainer: { - alignItems: 'center', - display: 'flex', - height: backgroundImageHeight, - justifyContent: 'center', - }, - logo: { border: 'solid 1px rgba(0, 0, 0, 0.25)', borderRadius: '8px' }, - logosContainer: { - alignItems: 'center', - display: 'flex', - justifyContent: 'space-between', - paddingLeft: logoPadding, - paddingRight: logoPadding, - position: 'absolute', - width: `calc(100% - ${logoPadding} - ${logoPadding})`, - }, - } as const - // if we don't have the schedule initialized just show a spinner. if (jobSchedule.isInitialized === false) { return ( -
+
) @@ -69,22 +40,26 @@ export const ProgressBar = ({ const activeJob = JobSchedule.getActiveJob(jobSchedule) return ( - -
-
+ +
+
- + -
- -
+ {/* Do we actually need this testId? */} +
diff --git a/src/views/connecting/progress/progressBar.module.css b/src/views/connecting/progress/progressBar.module.css new file mode 100644 index 0000000000..069964aa41 --- /dev/null +++ b/src/views/connecting/progress/progressBar.module.css @@ -0,0 +1,32 @@ +.container { + text-align: center; +} + +.backgroundImage { + height: var(--progress-bar-background-image-height); + width: var(--progress-bar-background-image-height); + z-index: 1; +} + +.barContainer { + align-items: center; + display: flex; + height: var(--progress-bar-background-image-height); + justify-content: center; +} + +.logo { + border: solid 1px rgba(0, 0, 0, 0.25); + border-radius: 8px; +} + +.logosContainer { + align-items: center; + box-sizing: border-box; + display: flex; + justify-content: space-between; + padding-left: 28px; + padding-right: 28px; + position: absolute; + width: 100%; +} From 8d92fdd39db1ebf148ba9aff6047f32f0aa319fd Mon Sep 17 00:00:00 2001 From: Wes Risenmay Date: Wed, 20 Aug 2025 09:09:41 -0600 Subject: [PATCH 10/12] remove unnecessary test id --- src/views/connecting/progress/ProgressBar.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/views/connecting/progress/ProgressBar.tsx b/src/views/connecting/progress/ProgressBar.tsx index 32106a4505..7e84d59bf1 100644 --- a/src/views/connecting/progress/ProgressBar.tsx +++ b/src/views/connecting/progress/ProgressBar.tsx @@ -51,8 +51,7 @@ export const ProgressBar = ({ size={64} /> - {/* Do we actually need this testId? */} - + Date: Thu, 21 Aug 2025 07:41:48 -0600 Subject: [PATCH 11/12] converted ProgressCheckMark to css modules --- src/ConnectedTokenProvider.tsx | 3 ++- .../connecting/progress/ProgressCheckMark.js | 16 +++------------- .../progress/progressCheckMark.module.css | 4 ++++ 3 files changed, 9 insertions(+), 14 deletions(-) create mode 100644 src/views/connecting/progress/progressCheckMark.module.css diff --git a/src/ConnectedTokenProvider.tsx b/src/ConnectedTokenProvider.tsx index 0b19315e1e..0e3245c8dc 100644 --- a/src/ConnectedTokenProvider.tsx +++ b/src/ConnectedTokenProvider.tsx @@ -6,10 +6,11 @@ import { useSelector } from 'react-redux' import { Theme, ThemeProvider } from '@mui/material' import { deepmerge } from '@mui/utils' -import { createMXTheme, Icon, IconWeight } from '@kyper/mui' +import { Icon, IconWeight } from '@kyper/mui' import { TokenProvider, THEMES } from '@kyper/tokenprovider' import { getTokenProviderValues } from 'src/redux/selectors/ClientColorScheme' +import { createMXTheme } from '@mxenabled/mxui' declare module '@mui/material/styles' { interface PaletteColor { diff --git a/src/views/connecting/progress/ProgressCheckMark.js b/src/views/connecting/progress/ProgressCheckMark.js index 9e8b2fb734..542e8de663 100644 --- a/src/views/connecting/progress/ProgressCheckMark.js +++ b/src/views/connecting/progress/ProgressCheckMark.js @@ -1,19 +1,9 @@ import React from 'react' -import { useTokens } from '@kyper/tokenprovider' -import { CheckmarkFilled } from '@kyper/icon/CheckmarkFilled' +import { Icon } from '@mxenabled/mxui' +import styles from './progressCheckMark.module.css' export const ProgressCheckMark = () => { - const tokens = useTokens() - - const styles = { - height: '24px', - width: '24px', - zIndex: 20, - } - return ( -
- -
+ ) } diff --git a/src/views/connecting/progress/progressCheckMark.module.css b/src/views/connecting/progress/progressCheckMark.module.css new file mode 100644 index 0000000000..9666cc2369 --- /dev/null +++ b/src/views/connecting/progress/progressCheckMark.module.css @@ -0,0 +1,4 @@ +.container { + background-color: white; + z-index: 20; +} From fe2b70d8db1883037e2c13ddd6fc7b719848f73a Mon Sep 17 00:00:00 2001 From: Ashley Wright Date: Mon, 29 Sep 2025 09:52:06 -0700 Subject: [PATCH 12/12] removed the border around the logos --- src/views/connecting/progress/progressBar.module.css | 1 - 1 file changed, 1 deletion(-) diff --git a/src/views/connecting/progress/progressBar.module.css b/src/views/connecting/progress/progressBar.module.css index 069964aa41..ff2baf64f1 100644 --- a/src/views/connecting/progress/progressBar.module.css +++ b/src/views/connecting/progress/progressBar.module.css @@ -16,7 +16,6 @@ } .logo { - border: solid 1px rgba(0, 0, 0, 0.25); border-radius: 8px; }