@connectid-tools/idp-selector-react 6.7.0 → 6.9.0

package/IntroText.js

@@ -5,10 +5,11 @@ import { ThemeContext } from './ThemeContext';
 const introTextContent = {
     'verify-trust': 'ConnectID lets you verify your identity through details stored with an organisation you already trust, like your bank.',
     'verify-account': 'Verify your identity through an organisation you already have an account with, like your bank.',
-    'power': 'ConnectID gives you the power to choose how you share your details, using organisations you already trust.',
+    power: 'ConnectID gives you the power to choose how you share your details, using organisations you already trust.',
     'sign-up': 'ConnectID lets you sign up using details stored with an organisation you already trust, like your bank.',
     'bank-details-plus-personal-info': 'Provide your preferred bank account and personal details in a secure and simple way, without oversharing information.',
     'bank-details-only': 'Provide your preferred bank account details in a secure and simple way, without oversharing information.',
+    'verify-age': 'Verify your age through an organisation you already have an account with, like your bank.',
 };
 export const IntroText = ({ type }) => {
     const theme = useContext(ThemeContext);

package/Popup.css

@@ -153,7 +153,8 @@
   flex-shrink: 0;
 }
 .cid-idp-selector-popup-participants {
-  margin-top: 24px;
+  list-style: none;
+  margin: 24px 0 16px 0;
   display: grid;
   grid-template-columns: 225px 225px;
   grid-gap: 16px;
@@ -173,33 +174,11 @@
   padding: 8px 16px;
   border: 1px solid #E9E9E9;
 }
-.cid-idp-selector-popup-participant-greyed-out {
-  display: flex;
-  align-items: center;
-  border-radius: 12px;
-  cursor: pointer;
-  box-sizing: border-box;
-  padding: 8px 16px;
-  border: 1px solid #E9E9E9;
-  background-color: #F4F4F4;
-  cursor: default;
-  margin-bottom: 4px;
-}
-.cid-idp-selector-popup-participant-greyed-out-text {
-  color: #5C5C5C;
-  font-size: 10px;
-}
 .cid-idp-selector-popup-participant-icon {
   width: 32px;
   height: 32px;
   border-radius: 8px;
 }
-.cid-idp-selector-popup-participant-icon-greyed-out {
-  width: 32px;
-  height: 32px;
-  border-radius: 8px;
-  opacity: 60%
-}
 .cid-idp-selector-popup-participant-description {
   position: absolute;
   width: 1px;
@@ -224,16 +203,26 @@
   text-overflow: ellipsis;
   width: 90%;
 }
-.cid-idp-selector-popup-participant-name-greyed-out {
-  font-size: 14px;
+.cid-idp-selector-popup-missing {
+  border-radius: 12px;
+  background: #F4F4F4;
+  padding: 18px;
+}
+.cid-idp-selector-popup-missing-title {
+  color: var(--charcoal);
   font-family: var(--font);
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 120%;
+  margin: 0;
+}
+.cid-idp-selector-popup-missing-text {
   color: var(--charcoal75);
-  margin-left: 12px;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  width: 90%;
-
+  font-family: var(--font);
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 120%;
+  margin: 8px 0 0 0;
 }
 .cid-idp-selector-popup-manual {
   font-family: var(--font);
@@ -294,18 +283,6 @@
   max-width: 466px;
 }
 
-.cid-greyout-participant-name {
-  position: absolute;
-  display: inline-flex;
-  flex-direction: row;
-  align-items: center;
-}
-
-.cid-idp-selector-button-info-icon-greyed-out {
-  margin-right: 2px;
-  flex-shrink: 0;
-}
-
 @media (prefers-reduced-motion: reduce) {
   .cid-idp-selector-popup-logo-dot {
     animation: none;
@@ -324,6 +301,7 @@
     margin: 20px 0;
   }
   .cid-idp-selector-popup-participants {
+    margin: 16px 0 12px 0;
     grid-template-columns: 190px 190px;
   }
 }
@@ -358,13 +336,9 @@
     margin: 20px auto 0 auto;
   }
   .cid-idp-selector-popup-participants {
-    margin-top: 12px;
     grid-template-columns: 1fr;
     max-height: 550px;
   }
-  .cid-idp-selector-popup-participant-greyed-out {
-    margin-bottom: 8px;
-  }
   .cid-idp-selector-popup-participant-name {
     overflow: inherit;
     white-space: normal;
@@ -372,9 +346,6 @@
     width: 100%;
     font-size: 16px;
   }
-  .cid-greyout-participant-name {
-    margin-top: -6px;
-  }
   .cid-idp-selector-popup-close {
     position: absolute;
     padding: 8px;

package/Popup.js

@@ -12,7 +12,7 @@ import { useEffect, useRef, useState } from 'react';
 import ReactDOM from 'react-dom';
 import { useMediaQuery } from 'react-responsive';
 import { useAnalytics } from './analytics';
-import { filterAuthorisationServers, getManualAuthorisationServer, mapAuthorisationServerToDeviceType, } from './certification';
+import { filterAuthorisationServers, getManualAuthorisationServer } from './certification';
 import './global.css';
 import { InfoBox } from './InfoBox';
 import { getCurrentUrlOrigin } from './navigator';
@@ -20,7 +20,6 @@ import { NoIdpError } from './NoIdpError';
 import { ParticipantsLoader } from './ParticipantsLoader';
 import './Popup.css';
 import { useOverrideShiftTab, useOverrideTab } from './TabHook';
-import { getDeviceType } from './userAgent';
 import detectIncognito from './incognito';
 export const Popup = ({ onProceed, onCancel, onError, claims, requiredClaims, showAllParticipants, certificationStatus, popupTitle, rpDataSharingDescription, enableManualVerification, requiredCertifications, rpLogoUrl, participants, error, isLoading, }) => {
     const [isIncognito, setIsIncognito] = useState();
@@ -123,14 +122,6 @@ export const Popup = ({ onProceed, onCancel, onError, claims, requiredClaims, sh
         }
         return (_jsxs(_Fragment, { children: [_jsx("div", { className: "cid-idp-selector-popup-title-container", children: renderClaimsTitle() }), renderClaimList()] }));
     };
-    const participantTile = (AuthorisationServerId, CustomerFriendlyName, CustomerFriendlyLogoUri, deviceType) => {
-        if (deviceType === 'desktop') {
-            return (_jsxs("div", { children: [_jsx("span", { id: `participant-greyed-out-description-${CustomerFriendlyName}`, className: "cid-idp-selector-popup-participant-description", "aria-hidden": "true", children: "available on mobile only" }), _jsxs("li", { "data-testid": "participant-greyed-out", className: "cid-idp-selector-popup-participant-greyed-out", "aria-disabled": "true", "aria-describedby": `participant-greyed-out-description-${CustomerFriendlyName}`, tabIndex: 0, children: [_jsx("img", { className: "cid-idp-selector-popup-participant-icon-greyed-out", src: CustomerFriendlyLogoUri, alt: `${CustomerFriendlyName} logo` }), _jsx("div", { className: "cid-idp-selector-popup-participant-name-greyed-out", title: CustomerFriendlyName, "data-testid": "participant-name", children: CustomerFriendlyName })] }, AuthorisationServerId), _jsxs("div", { className: "cid-greyout-participant-name", children: [_jsxs("svg", { className: "cid-idp-selector-button-info-icon-greyed-out", width: "8", height: "8", viewBox: "0 0 13 13", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M6.53509 12.3572C9.59207 12.3572 12.0702 9.81483 12.0702 6.67859C12.0702 3.54239 9.59207 1 6.53509 1C3.47814 1 1 3.54239 1 6.67859C1 9.81483 3.47814 12.3572 6.53509 12.3572Z", stroke: "#262626", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M5.25781 9.29883H7.81247", stroke: "#262626", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M6.53515 4.49472C6.7703 4.49472 6.96093 4.29915 6.96093 4.05791C6.96093 3.81666 6.7703 3.62109 6.53515 3.62109C6.3 3.62109 6.10938 3.81666 6.10938 4.05791C6.10938 4.29915 6.3 4.49472 6.53515 4.49472Z", fill: "#262626", stroke: "#262626", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M6.53515 9.29989V6.24219H5.68359", stroke: "#262626", strokeLinecap: "round", strokeLinejoin: "round" })] }), _jsx("div", { "data-testid": "cid-greyout-participant-name-mobile-only", className: "cid-idp-selector-popup-participant-greyed-out-text", "aria-describedby": `participant-greyed-out-description-${CustomerFriendlyName}`, children: "Available on mobile only" })] })] }));
-        }
-        else {
-            return (_jsxs("li", { "data-testid": "participant", className: "cid-idp-selector-popup-participant", tabIndex: 0, onClick: () => onProceed(AuthorisationServerId, CustomerFriendlyName), children: [_jsx("img", { className: "cid-idp-selector-popup-participant-icon", src: CustomerFriendlyLogoUri, alt: `${CustomerFriendlyName} logo` }), _jsx("div", { className: "cid-idp-selector-popup-participant-name", title: CustomerFriendlyName, "data-testid": "participant-name", children: CustomerFriendlyName })] }, AuthorisationServerId));
-        }
-    };
     const renderAuthorisationServers = () => {
         if (isLoading) {
             return (_jsxs("div", { className: "cid-idp-selector-popup-provider-wrapper", children: [_jsx("h3", { className: "cid-idp-selector-popup-subtitle", children: "Choose a provider" }), _jsx(ParticipantsLoader, {})] }));
@@ -142,18 +133,19 @@ export const Popup = ({ onProceed, onCancel, onError, claims, requiredClaims, sh
             return (_jsx("div", { className: "cid-idp-selector-popup-info-box-wrapper-warn", children: _jsx(NoIdpError, { dataTestId: "participant-error", hasManualIdp: false }) }));
         }
         const authorisationServers = participants
-            .map((participant) => participant.AuthorisationServers)
-            .flat()
+            .flatMap((participant) => participant.AuthorisationServers)
             .sort((authServer1, authServer2) => authServer1.CustomerFriendlyName.localeCompare(authServer2.CustomerFriendlyName));
         const manualAuthorisationServer = getManualAuthorisationServer(authorisationServers, showAllParticipants);
         const authorisationServersWithoutManual = authorisationServers.filter(({ AuthorisationServerId }) => AuthorisationServerId !== (manualAuthorisationServer === null || manualAuthorisationServer === void 0 ? void 0 : manualAuthorisationServer.AuthorisationServerId));
         const filterByClaims = requiredClaims || claims;
         const filteredAuthorisationServers = filterAuthorisationServers(authorisationServersWithoutManual, showAllParticipants, certificationStatus, filterByClaims, requiredCertifications);
-        const filteredAuthServerByDevice = mapAuthorisationServerToDeviceType(filteredAuthorisationServers, getDeviceType());
+        // Getting all auth servers that have certifications with profile type 'Redirect' and profile variant 'FAPI2 Adv. OP w/Private Key, PAR'
+        const authorisationServerWithProfileRedirectFapi2 = authorisationServersWithoutManual.filter(({ AuthorisationServerCertifications }) => {
+            return AuthorisationServerCertifications.find(({ ProfileType, ProfileVariant }) => ProfileType === 'Redirect' && ProfileVariant === 'FAPI2 Adv. OP w/Private Key, PAR');
+        });
+        const missingAuthorisationServerWithProfileRedirectFapi2 = authorisationServerWithProfileRedirectFapi2.length !== filteredAuthorisationServers.length;
         const hasManualIdp = enableManualVerification && !!manualAuthorisationServer;
-        return (_jsxs(_Fragment, { children: [filteredAuthorisationServers.length > 0 ? (_jsxs("div", { className: "cid-idp-selector-popup-provider-wrapper", children: [_jsx("h3", { className: "cid-idp-selector-popup-subtitle", children: "Choose a provider" }), _jsx("ul", { className: "cid-idp-selector-popup-participants", "data-testid": "participants", children: Array.from(filteredAuthServerByDevice.entries()).map(([authServer, device]) => {
-                                return (_jsx("div", { children: participantTile(authServer.AuthorisationServerId, authServer.CustomerFriendlyName, authServer.CustomerFriendlyLogoUri, device) }, authServer.AuthorisationServerId));
-                            }) })] })) : (_jsx("div", { className: "cid-idp-selector-popup-info-box-error-wrapper", "data-testid": "popup-error-info-box", children: _jsx(NoIdpError, { hasManualIdp: hasManualIdp }) })), enableManualVerification && manualAuthorisationServer && (_jsx(_Fragment, { children: _jsxs("p", { className: "cid-idp-selector-popup-manual", children: [_jsx("span", { className: "cid-idp-selector-popup-manual-title", "data-testid": "manual-verification-text", children: "Or, use a document to verify your identity" }), _jsx("span", { className: "cid-idp-selector-popup-manual-action", tabIndex: 0, onClick: () => onProceed(manualAuthorisationServer.AuthorisationServerId, manualAuthorisationServer.CustomerFriendlyName), "data-testid": "manual-verification-action", role: "link", children: "Verify with a document" }), _jsx("span", { className: "cid-idp-selector-popup-manual-description", children: "ConnectID does not collect, hold or store your personal information at any time." })] }) }))] }));
+        return (_jsxs(_Fragment, { children: [filteredAuthorisationServers.length > 0 ? (_jsxs("div", { className: "cid-idp-selector-popup-provider-wrapper", children: [_jsx("h3", { className: "cid-idp-selector-popup-subtitle", children: "Choose a provider" }), _jsx("ul", { className: "cid-idp-selector-popup-participants", "data-testid": "participants", children: filteredAuthorisationServers.map(({ AuthorisationServerId, CustomerFriendlyName, CustomerFriendlyLogoUri }) => (_jsxs("li", { "data-testid": "participant", className: "cid-idp-selector-popup-participant", tabIndex: 0, onClick: () => onProceed(AuthorisationServerId, CustomerFriendlyName), children: [_jsx("img", { className: "cid-idp-selector-popup-participant-icon", src: CustomerFriendlyLogoUri, alt: `${CustomerFriendlyName} logo` }), _jsx("div", { className: "cid-idp-selector-popup-participant-name", title: CustomerFriendlyName, "data-testid": "participant-name", children: CustomerFriendlyName })] }, AuthorisationServerId))) }), missingAuthorisationServerWithProfileRedirectFapi2 && (_jsxs("div", { className: "cid-idp-selector-popup-missing", "data-testid": "missing-auth-server", children: [_jsx("p", { className: "cid-idp-selector-popup-missing-title", children: "Can't find your provider?" }), _jsx("p", { className: "cid-idp-selector-popup-missing-text", children: "Not all of our identity providers are available for this verification." })] }))] })) : (_jsx("div", { className: "cid-idp-selector-popup-info-box-error-wrapper", "data-testid": "popup-error-info-box", children: _jsx(NoIdpError, { hasManualIdp: hasManualIdp }) })), enableManualVerification && manualAuthorisationServer && (_jsx(_Fragment, { children: _jsxs("p", { className: "cid-idp-selector-popup-manual", children: [_jsx("span", { className: "cid-idp-selector-popup-manual-title", "data-testid": "manual-verification-text", children: "Or, use a document to verify your identity" }), _jsx("span", { className: "cid-idp-selector-popup-manual-action", tabIndex: 0, onClick: () => onProceed(manualAuthorisationServer.AuthorisationServerId, manualAuthorisationServer.CustomerFriendlyName), "data-testid": "manual-verification-action", role: "link", children: "Verify with a document" }), _jsx("span", { className: "cid-idp-selector-popup-manual-description", children: "ConnectID does not collect, hold or store your personal information at any time." })] }) }))] }));
     };
     return ReactDOM.createPortal(_jsxs("div", { className: "cid-idp-selector-popup", tabIndex: 0, ref: popupRef, onKeyDown: handleEnterEsc, children: [_jsxs("div", { className: "cid-idp-selector-popup-logo-container", children: [_jsxs("div", { className: "cid-idp-selector-popup-logos", children: [_jsxs("svg", { role: "img", focusable: "false", className: "cid-idp-selector-popup-logo", viewBox: "0 0 132.37 157.84", "data-testid": "cid-logo", children: [_jsx("title", { children: "ConnectID logo" }), _jsx("path", { d: "M102.22,91.65c0,19.9-16.13,36.03-36.03,36.03s-36.03-16.13-36.03-36.03,16.13-36.03,36.03-36.03c9.95,0,18.96,4.03,25.48,10.55l40.71-40.71c-6.52-6.52-10.55-15.52-10.55-25.46h-30.14c0,13.45,4.02,25.95,10.92,36.39-10.45-6.9-22.96-10.93-36.42-10.93C29.63,25.47,0,55.1,0,91.65s29.63,66.19,66.19,66.19,66.19-29.63,66.19-66.19h-30.16Z" })] }), rpLogoUrl && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "cid-idp-selector-popup-logo-dots", children: [_jsx("div", { className: "cid-idp-selector-popup-logo-dot" }), _jsx("div", { className: "cid-idp-selector-popup-logo-dot" }), _jsx("div", { className: "cid-idp-selector-popup-logo-dot" })] }), _jsx("img", { className: "cid-idp-selector-popup-logo-rp", src: rpLogoUrl, alt: "RP logo", "data-testid": "rp-logo" })] }))] }), _jsxs("button", { "aria-label": "Close popup", "data-testid": "popup-close", className: "cid-idp-selector-popup-close", onClick: onCancel, tabIndex: 0, ref: closeButtonRef, children: [_jsx("span", { className: "cid-idp-selector-popup-close-label", children: "Close" }), _jsx("svg", { clipRule: "evenodd", fillRule: "evenodd", strokeLinejoin: "round", strokeMiterlimit: "2", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "m12 10.93 5.719-5.72c.146-.146.339-.219.531-.219.404 0 .75.324.75.749 0 .193-.073.385-.219.532l-5.72 5.719 5.719 5.719c.147.147.22.339.22.531 0 .427-.349.75-.75.75-.192 0-.385-.073-.531-.219l-5.719-5.719-5.719 5.719c-.146.146-.339.219-.531.219-.401 0-.75-.323-.75-.75 0-.192.073-.384.22-.531l5.719-5.719-5.72-5.719c-.146-.147-.219-.339-.219-.532 0-.425.346-.749.75-.749.192 0 .385.073.531.219z" }) })] })] }), _jsxs("div", { className: "cid-idp-selector-popup-title-description-container", children: [_jsx("h2", { className: "cid-idp-selector-popup-title", children: popupTitle }), _jsx("p", { className: "cid-idp-selector-popup-description", children: rpDataSharingDescription })] }), renderClaims(), renderAuthorisationServers(), _jsx("div", { className: "cid-idp-selector-popup-info-box-wrapper", children: _jsxs(InfoBox, { children: [_jsx("h4", { className: "cid-idp-selector-popup-info-box-title", children: "What is ConnectID?" }), _jsxs("p", { className: "cid-idp-selector-popup-info-box-text", "data-testid": "whats-cid-text", children: ["ConnectID is an Australian-owned digital identity solution which allows you to securely prove who you are. ConnectID does not see or store your personal data. Visit", ' ', _jsx("a", { className: "cid-idp-selector-popup-info-box-link", href: "https://www.connectid.com.au", onClick: handleConnectIdLinkClicked, target: "_blank", tabIndex: 0, "data-testid": "info-box-link", ref: infoboxLinkRef, children: "connectid.com.au" }), ' ', "to find out more."] })] }) })] }), document.querySelector('body'));
 };

package/README.md

@@ -43,7 +43,7 @@ Your page should render a widget similar to this 👇 And when the button is cli
 | rpDataSharingDescription | The text that goes under the popup title explaining how shared data will be used.                                                                                                                                                                                                                                                                              | string                                                                                       | no                                                | 'Your details will be shared with the current website.' |
 | enableManualVerification | Whether an option to verify identity manually is displayed or not.                                                                                                                                                                                                                                                                                             | boolean                                                                                      | no                                                | false                                                   |
 | type                     | The type of ConnectID button widget. [More details here](#type)                                                                                                                                                                                                                                                                                                | 'tiny' \| 'medium benefits' \| 'medium process' \| 'full benefits' \| 'full process'         | no                                                | undefined (shows only ConnectID button).                |
-| introTextType                | The text that goes above the ConnectID button. [More details here](#introTextType)                                                                                                                                                                                                                                                                                 | 'verify-trust' \| 'verify-account' \| 'power' \| 'sign-up' \| 'bank-details-plus-personal-info' \| 'bank-details-only' | yes when `type` is set.                     | -                                                 |
+| introTextType                | The text that goes above the ConnectID button. [More details here](#introTextType)                                                                                                                                                                                                                                                                                 | 'verify-trust' \| 'verify-account' \| 'power' \| 'sign-up' \| 'bank-details-plus-personal-info' \| 'bank-details-only' \| 'verify-age' | yes when `type` is set.                     | -                                                 |
 | fullProcessCollapsible   | Whether process items are collapsible or not. Only available when `type` is `full process`.                                                                                                                                                                                                                                                                    | boolean                                                                                      | no                                                | false                                                   |
 | showAllParticipants      | Show all participants regardless of any other option. **_This should only be used for testing_**.                                                                                                                                                                                                                                                              | boolean                                                                                      | no                                                | false                                                   |
 | theme                    | ConnectID button theme.                                                                                                                                                                                                                                                                                                                                        | 'dark' \| 'light'                                                                            | no                                                | 'dark'                                                  |
@@ -188,6 +188,7 @@ All elements have classes that can be styled with CSS to match you brand identit
 `sign-up`: ConnectID lets you sign up using details stored with an organisation you already trust, like your bank.\
 `bank-details-plus-personal-info`: Provide your preferred bank account and personal details in a secure and simple way, without oversharing information.\
 `bank-details-only`: Provide your preferred bank account details in a secure and simple way, without oversharing information.
+`verify-age`: Verify your age through an organisation you already have an account with, like your bank.
 </details>
 
 ### <a name="infoContent"></a>infoContent option
@@ -222,6 +223,12 @@ The SVG image below the ConnectID button has either option dark or light mode. B
 
 ## 🚀 Release Notes
 
+### 6.9.0 (Jun 5, 2025)
+- Add new `introTextType` option: `verify-age`.
+
+### 6.8.0 (May 7, 2025)
+- Show message in the IDP list when any IDP with `ProfileType=Redirect` and `ProfileVariant=FAPI2 Adv. OP w/Private Key, PAR` is not being displayed.
+
 ### 6.7.0 (May 5, 2025)
 - Detect incognito.
 

package/certification.d.ts

@@ -3,6 +3,6 @@ export declare const filterAuthorisationServers: (authorisationServers: Authoris
 export declare const getManualAuthorisationServer: (authorisationServers: AuthorisationServer[], showAllParticipants: boolean) => AuthorisationServer | undefined;
 export declare const removeExpiredOrNotStartedCertifications: (authorisationServers: AuthorisationServer[]) => AuthorisationServer[];
 export declare const filterAuthorisationServerByClaims: (authorisationServers: AuthorisationServer[], claims: Claim[]) => AuthorisationServer[];
-export declare const mapAuthorisationServerToDeviceType: (authorisationServers: AuthorisationServer[], deviceType: Device) => Map<AuthorisationServer, Device>;
 export declare const filterAuthorisationServerByCertification: (authorisationServers: AuthorisationServer[], status: CertificationStatus, requiredCertifications?: RequiredCertification[]) => AuthorisationServer[];
+export declare const filterAuthorisationServerByDevice: (authorisationServers: AuthorisationServer[], deviceType: Device) => AuthorisationServer[];
 export declare const hasStarted: (startDateStr: string) => boolean;

package/certification.js

@@ -1,3 +1,4 @@
+import { getDeviceType } from './userAgent';
 const requiredCertificationsMap = {
     'TDIF.IDP': { type: 'TDIF Accreditation', variant: 'Identity Provider' },
     'Redirect.FAPI2': { type: 'Redirect', variant: 'FAPI2 Adv. OP w/Private Key, PAR' },
@@ -6,7 +7,9 @@ export const filterAuthorisationServers = (authorisationServers, showAllParticip
     if (showAllParticipants)
         return authorisationServers;
     const authorisationServersWithValidCertifications = removeExpiredOrNotStartedCertifications(authorisationServers);
-    const filteredAuthorisationServersByClaims = filterAuthorisationServerByClaims(authorisationServersWithValidCertifications, claims);
+    const device = getDeviceType();
+    const filteredAuthorisationServersByDevice = filterAuthorisationServerByDevice(authorisationServersWithValidCertifications, device);
+    const filteredAuthorisationServersByClaims = filterAuthorisationServerByClaims(filteredAuthorisationServersByDevice, claims);
     const filteredAuthorisationServers = filterAuthorisationServerByCertification(filteredAuthorisationServersByClaims, certificationStatus, requiredCertifications);
     return filteredAuthorisationServers;
 };
@@ -37,20 +40,6 @@ export const filterAuthorisationServerByClaims = (authorisationServers, claims)
         return profileVariants.every((profileVariant) => authorisationServerProfileVariants.includes(profileVariant));
     });
 };
-export const mapAuthorisationServerToDeviceType = (authorisationServers, deviceType) => {
-    const authServerMap = new Map();
-    if (deviceType === 'mobile') {
-        authorisationServers.forEach((authorisationServer) => {
-            authServerMap.set(authorisationServer, 'mobile');
-        });
-        return authServerMap;
-    }
-    authorisationServers.map((authorisationServer) => {
-        const channelCertifications = authorisationServer.AuthorisationServerCertifications.filter((cert) => cert.ProfileType === 'Channel');
-        authServerMap.set(authorisationServer, channelCertifications.length === 1 && channelCertifications[0].ProfileVariant === 'app' ? 'desktop' : 'mobile');
-    });
-    return authServerMap;
-};
 export const filterAuthorisationServerByCertification = (authorisationServers, status, requiredCertifications) => {
     const filteredByStatus = filterByStatus(authorisationServers, status);
     const filteredByStatusAndRequiredCertifications = filterByRequiredCertifications(filteredByStatus, requiredCertifications);
@@ -81,6 +70,18 @@ const filterByRequiredCertifications = (authorisationServers, requiredCertificat
         return requiredCertificationsFound === requiredCertifications.length;
     });
 };
+// mobile return all authorisation servers
+// tablet and desktop return all authorisation servers but those ones with only one certification and that certification is app
+export const filterAuthorisationServerByDevice = (authorisationServers, deviceType) => {
+    if (deviceType === 'mobile')
+        return authorisationServers;
+    const onlyAppAuthorisationServers = authorisationServers.filter((authorisationServer) => {
+        const channelCertifications = authorisationServer.AuthorisationServerCertifications.filter((cert) => cert.ProfileType === 'Channel');
+        return channelCertifications.length === 1 && channelCertifications[0].ProfileVariant === 'app';
+    });
+    const onlyAppAuthorisationServersIds = onlyAppAuthorisationServers.map((authorisationServer) => authorisationServer.AuthorisationServerId);
+    return authorisationServers.filter((authorisationServer) => !onlyAppAuthorisationServersIds.includes(authorisationServer.AuthorisationServerId));
+};
 const isExpired = (expiryDateStr) => {
     const expiryDate = parseCertificationDate(expiryDateStr);
     expiryDate.setHours(23);

package/certification.test.js

@@ -1,6 +1,6 @@
 import assert from 'node:assert';
 import { describe, it } from 'node:test';
-import { filterAuthorisationServerByClaims, filterAuthorisationServers, getManualAuthorisationServer, mapAuthorisationServerToDeviceType, removeExpiredOrNotStartedCertifications, } from './certification';
+import { filterAuthorisationServerByClaims, filterAuthorisationServerByDevice, filterAuthorisationServers, getManualAuthorisationServer, removeExpiredOrNotStartedCertifications, } from './certification';
 describe('filterAuthorisationServers', () => {
     it('should return all authorisation servers if showAllParticipants is true regardless of certification status, required certifications and claims', () => {
         const authorisationServers = [
@@ -306,82 +306,93 @@ describe('removeExpiredCertifications', () => {
     });
 });
 describe('filterAuthorisationServerByDevice', () => {
-    const authorisationServers = [
-        {
-            AuthorisationServerId: '71fe3927-f596-4192-ab9a-f6644cdb9b2b',
-            CustomerFriendlyLogoUri: 'https://static.sandbox.connectid.com.au/BankA.svg',
-            CustomerFriendlyName: 'Mock Bank A',
-            AuthorisationServerCertifications: [
-                {
-                    CertificationStartDate: '10/04/1900',
-                    CertificationExpirationDate: '10/04/2024',
-                    Status: 'Certified',
-                    ProfileVariant: 'web',
-                    ProfileType: 'Channel',
-                },
-            ],
-        },
-        {
-            AuthorisationServerId: '71fe3927-f596-4192-ab9a-f6644cdb9b2x',
-            CustomerFriendlyLogoUri: 'https://static.sandbox.connectid.com.au/BankA.svg',
-            CustomerFriendlyName: 'Mock Bank B',
-            AuthorisationServerCertifications: [
-                {
-                    CertificationStartDate: '10/04/1900',
-                    CertificationExpirationDate: '10/04/2024',
-                    Status: 'Certified',
-                    ProfileVariant: 'web',
-                    ProfileType: 'Channel',
-                },
-            ],
-        },
-        {
-            AuthorisationServerId: 'fa8573a1-953a-4085-b5f7-070a42a4d5a9',
-            CustomerFriendlyLogoUri: 'https://static.sandbox.connectid.com.au/BankC.svg',
-            CustomerFriendlyName: 'Mock Bank C',
-            AuthorisationServerCertifications: [
-                {
-                    CertificationStartDate: '10/04/1900',
-                    CertificationExpirationDate: '10/04/2024',
-                    Status: 'Certified',
-                    ProfileVariant: 'app',
-                    ProfileType: 'Channel',
-                },
-            ],
-        },
-        {
-            AuthorisationServerId: 'fa8573a1-953a-4085-b5f7-070a42a4d5a1',
-            CustomerFriendlyLogoUri: 'https://static.sandbox.connectid.com.au/BankC.svg',
-            CustomerFriendlyName: 'Mock Bank D',
-            AuthorisationServerCertifications: [],
-        },
-    ];
-    it('should return all auth servers when device is mobile', () => {
-        const authServers = mapAuthorisationServerToDeviceType(authorisationServers, 'mobile');
-        const values = Array.from(authServers.values());
-        assert.deepStrictEqual(values.every((value) => value === 'mobile'), true);
-    });
-    it('should not return auth servers with only app cert when device is desktop', () => {
-        const authServers = mapAuthorisationServerToDeviceType(authorisationServers, 'desktop');
-        const filteredAuthServers = Array.from(authServers)
-            .filter(([_, device]) => device === 'mobile')
-            .map(([key, _]) => key);
-        assert.deepStrictEqual(filteredAuthServers, [
-            authorisationServers[0],
-            authorisationServers[1],
-            authorisationServers[3],
-        ]);
+    it('should return all authorisation servers for mobile', () => {
+        const authorisationServers = [
+            {
+                AuthorisationServerId: '1',
+                CustomerFriendlyLogoUri: 'https://static.sandbox.connectid.com.au/BankA.svg',
+                CustomerFriendlyName: 'Mock Bank A',
+                AuthorisationServerCertifications: [
+                    {
+                        ProfileType: 'Channel',
+                        ProfileVariant: 'app',
+                        CertificationExpirationDate: '10/04/2099',
+                        Status: 'Certified',
+                        CertificationStartDate: '10/04/1900',
+                    },
+                ],
+            },
+            {
+                AuthorisationServerId: '2',
+                CustomerFriendlyLogoUri: 'https://static.sandbox.connectid.com.au/BankA.svg',
+                CustomerFriendlyName: 'Mock Bank B',
+                AuthorisationServerCertifications: [
+                    {
+                        ProfileType: 'Channel',
+                        ProfileVariant: 'web',
+                        CertificationExpirationDate: '10/04/2099',
+                        Status: 'Certified',
+                        CertificationStartDate: '10/04/1900',
+                    },
+                ],
+            },
+        ];
+        assert.deepStrictEqual(filterAuthorisationServerByDevice(authorisationServers, 'mobile'), authorisationServers);
     });
-    it('should not return auth servers with only app cert when device is tablet', () => {
-        const authServers = mapAuthorisationServerToDeviceType(authorisationServers, 'tablet');
-        console.log(authServers);
-        const filteredAuthServers = Array.from(authServers)
-            .filter(([_, device]) => device === 'mobile')
-            .map(([key, _]) => key);
-        assert.deepStrictEqual(filteredAuthServers, [
-            authorisationServers[0],
-            authorisationServers[1],
-            authorisationServers[3],
-        ]);
+    it('should return all authorisation servers except those with only app certification when desktop', () => {
+        const authorisationServers = [
+            {
+                AuthorisationServerId: '1',
+                CustomerFriendlyLogoUri: 'https://static.sandbox.connectid.com.au/BankA.svg',
+                CustomerFriendlyName: 'Mock Bank A',
+                // has only app certification (removed)
+                AuthorisationServerCertifications: [
+                    {
+                        ProfileType: 'Channel',
+                        ProfileVariant: 'app',
+                        CertificationExpirationDate: '10/04/2099',
+                        Status: 'Certified',
+                        CertificationStartDate: '10/04/1900',
+                    },
+                ],
+            },
+            {
+                AuthorisationServerId: '2',
+                CustomerFriendlyLogoUri: 'https://static.sandbox.connectid.com.au/BankA.svg',
+                CustomerFriendlyName: 'Mock Bank B',
+                AuthorisationServerCertifications: [
+                    {
+                        ProfileType: 'Channel',
+                        ProfileVariant: 'web',
+                        CertificationExpirationDate: '10/04/2099',
+                        Status: 'Certified',
+                        CertificationStartDate: '10/04/1900',
+                    },
+                ],
+            },
+            {
+                AuthorisationServerId: '3',
+                CustomerFriendlyLogoUri: 'https://static.sandbox.connectid.com.au/BankA.svg',
+                CustomerFriendlyName: 'Mock Bank C',
+                // has web and app certifications (okay)
+                AuthorisationServerCertifications: [
+                    {
+                        ProfileType: 'Channel',
+                        ProfileVariant: 'app',
+                        CertificationExpirationDate: '10/04/2099',
+                        Status: 'Certified',
+                        CertificationStartDate: '10/04/1900',
+                    },
+                    {
+                        ProfileType: 'Channel',
+                        ProfileVariant: 'web',
+                        CertificationExpirationDate: '10/04/2099',
+                        Status: 'Certified',
+                        CertificationStartDate: '10/04/1900',
+                    },
+                ],
+            },
+        ];
+        assert.deepStrictEqual(filterAuthorisationServerByDevice(authorisationServers, 'desktop'), [authorisationServers[1], authorisationServers[2]]);
     });
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@connectid-tools/idp-selector-react",
-  "version": "6.7.0",
+  "version": "6.9.0",
   "description": "React component for IDP Selector.",
   "main": "index.js",
   "type": "module",
@@ -26,8 +26,8 @@
   "homepage": "https://github.com/connectid-tools/idp-selector-react",
   "devDependencies": {
     "@babel/preset-typescript": "^7.27.1",
-    "@types/node": "^22.15.3",
-    "@types/react": "^18.3.20",
+    "@types/node": "^22.15.29",
+    "@types/react": "^18.3.23",
     "@types/react-dom": "^18.3.7",
     "cypress": "^13.17.0",
     "jest-environment-jsdom": "^29.7.0",

package/types.d.ts

@@ -28,7 +28,7 @@ export type AnalyticsEvent = 'ConnectID Button Displayed' | 'ConnectID Button Cl
 export type Analytics = {
     track: (event: AnalyticsEvent, data?: Record<string, unknown>) => void;
 };
-export type IntroTextType = 'verify-trust' | 'verify-account' | 'power' | 'sign-up' | 'bank-details-plus-personal-info' | 'bank-details-only';
+export type IntroTextType = 'verify-trust' | 'verify-account' | 'power' | 'sign-up' | 'bank-details-plus-personal-info' | 'bank-details-only' | 'verify-age';
 export type CidButtonType = 'tiny' | 'medium benefits' | 'medium process' | 'full benefits' | 'full process';
 export type CidButtonTypeConfig = {
     hasIntro: boolean;