Provider Successor Connection

locales/en.json

@@ -296,6 +296,7 @@
     "connect-oura-button": "Connect Oura",
     "connect-oura-intro": "You can share data from your Oura account if you have one.  To begin, click or tap below to log in with your Oura credentials.",
     "connect-to-device": "Connect to @@DEVICE@@",
+    "connect-to-new-provider": "Connection obsolete. Please connect to the new provider",
     "connected": "Connected",
     "core-sleep-time": "Core Sleep Time",
     "create-report": "Create PDF Report",
@@ -390,6 +391,7 @@
     "heart-rate-range": "Heart Rate Range",
     "heart-rate-variability": "Heart Rate Variability",
     "help": "Help",
+    "here": "here",
     "high-stress-time": "High Stress Time",
     "highest-systolic": "Highest Systolic",
     "hours-abbreviation": "h",

locales/fr-CA.json

@@ -296,6 +296,7 @@
     "connect-oura-button": "Connecter Oura",
     "connect-oura-intro": "Vous pouvez partager les données de votre compte Oura si vous en avez un. Pour commencer, cliquez ou appuyez ci-dessous pour vous connecter avec vos identifiants Oura.",
     "connect-to-device": "Se connecter à @@DEVICE@@",
+    "connect-to-new-provider": "Connexion obsolète. Veuillez vous connecter au nouveau fournisseur",
     "connected": "Connecté",
     "core-sleep-time": "Temps de sommeil principal",
     "create-report": "Créer un rapport PDF",
@@ -396,6 +397,7 @@
     "how-severe-is": "Quelle est la gravité de votre",
     "how-severe-was": "Quelle était la gravité de votre",
     "how-to-enable": "Comment activer",
+    "here": "ici",
     "immunizations-title": "Vaccinations",
     "in-bed-time": "Temps au lit",
     "inbox-history-view-empty-text": "Vous n'avez aucun élément dans l'historique de votre boîte de réception.",

package.json

@@ -1,5 +1,6 @@
 {
   "name": "@careevolution/mydatahelps-ui",
+  "version": "3.2.1-boris-provider-successor-mdhui.2",
   "version": "3.8.0",
   "description": "MyDataHelps UI Library",
   "main": "dist/cjs/index.js",
@@ -106,7 +107,7 @@
     "zod": "^3.23.8"
   },
   "peerDependencies": {
-    "@careevolution/mydatahelps-js": "^5.0.0",
+    "@careevolution/mydatahelps-js": "^5.1.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

src/components/container/ExternalAccountList/ExternalAccountList.previewdata.tsx

@@ -12,7 +12,8 @@ export var previewExternalAccounts: ExternalAccount[] =
             "name": "Cedars-Sinai Health System",
             "category": "Provider",
             "logoUrl": "https://mdhorg.ce.dev/api/v1/delegated/externalaccountproviders/37/logo",
-            "enabled": true
+            "enabled": true,
+            "successorID": 99
         } as ExternalAccountProvider
     }, {
         id: 2,
@@ -21,10 +22,11 @@ export var previewExternalAccounts: ExternalAccount[] =
         provider:
         {
             "id": 1,
-            "name": "Kaiser Permanente",
+            "name": "CareEVolution",
             "category": "Provider",
             "logoUrl": "https://mdhorg.ce.dev/api/v1/delegated/externalaccountproviders/1/logo",
-            "enabled": true
+            "enabled": true,
+            "successorID": 1
         } as ExternalAccountProvider
     }, {
         id: 3,

src/components/container/ExternalAccountList/ExternalAccountList.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react'
-import MyDataHelps, { ConnectExternalAccountOptions, ExternalAccount } from '@careevolution/mydatahelps-js';
+import MyDataHelps, { ConnectExternalAccountOptions, ExternalAccount, ExternalAccountProvider } from '@careevolution/mydatahelps-js';
 import { Card, LoadingIndicator, SingleExternalAccount } from '../../presentational'
 import { previewExternalAccounts } from './ExternalAccountList.previewdata'
 
@@ -53,6 +53,15 @@ export default function (props: ExternalAccountListProps) {
             });
     }
 
+    const connectToSuccessorProvider = async (provider: ExternalAccountProvider): Promise<void> => {
+        if (provider.successorID) {
+            MyDataHelps.connectExternalAccount(provider.successorID, props.connectExternalAccountOptions ?? { openNewWindow: true })
+                .then(function () {
+                    loadExternalAccounts();
+                });
+        }
+    };
+
     useEffect(() => {
         initialize();
         MyDataHelps.on("applicationDidBecomeVisible", initialize);
@@ -70,7 +79,10 @@ export default function (props: ExternalAccountListProps) {
                     <SingleExternalAccount
                         externalAccount={externalAccount}
                         onAccountRemoved={(account: ExternalAccount) => onAccountRemoved(account)}
-                        onReconnectAccount={(account: ExternalAccount) => reconnectAccount(account)} />
+                        onReconnectAccount={(account: ExternalAccount) => reconnectAccount(account)}
+                        onConnectToSuccessorProvider={(provider: ExternalAccountProvider) => connectToSuccessorProvider(provider)}
+                        externalAccountProviderIds={externalAccounts.map(a => a.provider.id)}
+                    />
                 </Card>
             )}
             {loading &&

src/components/presentational/SingleExternalAccount/SingleExternalAccount.css

@@ -4,6 +4,14 @@
     background: var(--mdhui-background-color-0);
 }
 
+.mdhui-single-external-account .provider-successor-connection-nudge {
+    padding: 16px;
+    padding-bottom: 0;
+    padding-top: 0;
+    float: right;
+    font-size: .88em;
+}
+
 .mdhui-single-external-account .external-account-header {
     position: relative;
     padding: 8px;

src/components/presentational/SingleExternalAccount/SingleExternalAccount.tsx

@@ -1,7 +1,7 @@
 import UnstyledButton from '../UnstyledButton';
 import { faRefresh, faRepeat, faTrash } from '@fortawesome/free-solid-svg-icons'
 import React, { useState } from 'react';
-import MyDataHelps, { ExternalAccount } from '@careevolution/mydatahelps-js';
+import MyDataHelps, { ExternalAccount, ExternalAccountProvider } from '@careevolution/mydatahelps-js';
 import language from '../../../helpers/language';
 import "./SingleExternalAccount.css";
 import { getRelativeDateString } from "../../../helpers/date-helpers";
@@ -12,10 +12,12 @@ export interface SingleExternalAccountProps {
 	externalAccount: ExternalAccount;
 	onAccountRemoved: (account: ExternalAccount) => void;
 	onReconnectAccount: (account: ExternalAccount) => void;
+	onConnectToSuccessorProvider: (provider: ExternalAccountProvider) => void;
 	innerRef?: React.Ref<HTMLDivElement>;
+	externalAccountProviderIds?: number[];
 }
 
-export default function SingleExternalAccount (props: SingleExternalAccountProps) {
+export default function SingleExternalAccount(props: SingleExternalAccountProps) {
 	const [statusOverride, setStatusOverride] = useState("");
 
 	function removeAccount() {
@@ -52,6 +54,12 @@ export default function SingleExternalAccount (props: SingleExternalAccountProps
 					</UnstyledButton>
 				}
 			</div>
+			{/* Show link to connect to successor provider if there is one and user doesn't already have an account with them */}
+			{props.externalAccount.provider.successorID && (!props.externalAccountProviderIds || !props.externalAccountProviderIds.includes(props.externalAccount.provider.successorID)) &&
+				<p className="provider-successor-connection-nudge">
+					{language('connect-to-new-provider')} <a href="#" onClick={(e) => { e.preventDefault(); props.onConnectToSuccessorProvider(props.externalAccount.provider); }}>{language('here')}</a>.
+				</p>
+			}
 			<div className="external-account-status">
 				{getStatus() === "unauthorized" &&
 					<p>