@connectid-tools/idp-selector-react 6.10.0-alpha.12 → 6.10.0-alpha.14

package/CidButton.js

@@ -44,6 +44,7 @@ forceBrowser = undefined, // only for testing purposes
     }));
     const [showPopup, setShowPopup] = useState(false);
     const [isIncognito, setIsIncognito] = useState();
+    const [authorisationServersThatDisplayedCompatibilityPopup, setAuthorisationServersThatDisplayedCompatibilityPopup] = useState([]);
     const analyticsData = {
         claims,
         rpLogoUrl,
@@ -125,11 +126,11 @@ forceBrowser = undefined, // only for testing purposes
             return;
         track();
     }, []);
-    const getCompatibilityConfirmText = (compatibilityWarnings) => {
+    const getCompatibilityPopupText = (compatibilityWarnings) => {
         if (compatibilityWarnings.mobileOs === 'android' && compatibilityWarnings.browser === 'samsung') {
-            return 'It looks like you are using Samsung Browser. This generally will not work - we suggest using Chrome and trying again.\nClick on "Cancel" to abort or "OK" to proceed.';
+            return "We couldn't open your identity provider's app. Samsung Internet doesn't support this step. To continue verifying your identity, please switch to a different browser.";
         }
-        return 'It looks like you are in incognito mode. This generally will not work - we suggest switching out of incognito mode and trying again.\nClick on "Cancel" to abort or "OK" to proceed.';
+        return "Looks like you're in incognito mode.\nWe can't complete verification using this identity provider while private browsing is on. To continue, please open a regular browser window and try again.";
     };
     const handleOnProceed = (authorisationServerId, authorisationServerName, authorisationServerCertifications) => {
         if (typeof analytics !== 'undefined') {
@@ -147,14 +148,12 @@ forceBrowser = undefined, // only for testing purposes
             isIos: forceIos || isIos(),
             browser: forceBrowser || getBrowserName(),
         });
-        if (showCompatibilityWarnings && compatibility.mightFail) {
-            const confirmText = getCompatibilityConfirmText(compatibility);
-            if (confirm(confirmText)) {
-                onProceed(authorisationServerId, compatibility);
-            }
-            else {
-                setShowPopup(true);
-            }
+        const authorisationServerHasNotDisplayedCompatibilityPopup = authorisationServersThatDisplayedCompatibilityPopup.find(authServerId => authServerId === authorisationServerId) === undefined;
+        if (showCompatibilityWarnings && compatibility.mightFail && authorisationServerHasNotDisplayedCompatibilityPopup) {
+            const popupText = getCompatibilityPopupText(compatibility);
+            alert(popupText);
+            setShowPopup(true);
+            setAuthorisationServersThatDisplayedCompatibilityPopup([...authorisationServersThatDisplayedCompatibilityPopup, authorisationServerId]);
             return;
         }
         onProceed(authorisationServerId, compatibility);

package/IdpLogoList.css

@@ -2,52 +2,22 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  flex-wrap: wrap;
   gap: 8px;
-  margin-top: 6px;
-  margin-bottom: 12px;
+  margin-top: 10px;
+  margin-bottom: 16px;
 }
-.cid-idp-selector-idp-logo-list-title {
-  font-size: 12px;
-  color: var(--charcoal75);
+.cid-idp-selector-idp-logo-list-label {
+  font-size: 13px;
+  color: var(--charcoal);
 }
-.cid-idp-selector-idp-logo-list-title.cid-idp-selector-idp-logo-list-title--light {
+.cid-idp-selector-idp-logo-list-label--dark {
   color: white;
 }
-.cid-idp-selector-idp-logo-list {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-}
 .cid-idp-selector-idp-logo-list-logo {
-  width: 24px;
-  height: 24px;
-  border-radius: 2px;
+  height: 30px;
 }
 .cid-idp-selector-idp-logo-list-skeleton-wrapper {
   margin-top: 20px;
   display: flex;
   justify-content: center;
 }
-.cid-logo-lockup {
-  width: 264px;
-  height: 53.18px;
-}
-@media (max-width: 1440px) {
- .cid-logo-lockup {
-    width: 234px;
-    height: 47px;
-  }
-} 
-@media (max-width: 430px) {
-  .cid-logo-lockup {
-     width: 233.78px;
-     height: 45px;
-   }
- } 
- @media (max-width: 375px) {
-  .cid-logo-lockup {
-     width: 213px;
-     height: 41px;
-   }
- } 

package/IdpLogoList.js

@@ -1,16 +1,12 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import './IdpLogoList.css';
 import { Skeleton } from './Skeleton';
-const logoLockupUrl = {
-    dark: 'https://cdn.connectid.com.au/images/idp-selector/logo-lockup/logo-lockup-dark.svg',
-    light: 'https://cdn.connectid.com.au/images/idp-selector/logo-lockup/logo-lockup-light.svg',
-};
 export const IdpLogoList = ({ loading, logoLockupStyle }) => {
     if (loading) {
-        return (_jsx("div", { className: "cid-idp-selector-idp-logo-list-skeleton-wrapper", children: _jsx(Skeleton, { height: "24px", width: "120px", dataTestId: "idp-logo-list-loading" }) }));
+        return (_jsx("div", { className: "cid-idp-selector-idp-logo-list-skeleton-wrapper", children: _jsx(Skeleton, { height: "25px", width: "203px", dataTestId: "idp-logo-list-loading" }) }));
     }
     const isDarkMode = logoLockupStyle === 'dark';
-    const imgSrc = isDarkMode ? logoLockupUrl.dark : logoLockupUrl.light;
-    const dataTestId = isDarkMode ? 'logo-lockup-dark' : 'logo-lockup-light';
-    return (_jsx("div", { className: "cid-idp-selector-idp-logo-list-wrapper", "data-testid": "idp-logo-list-wrapper", children: _jsx("img", { "data-testid": dataTestId, className: "cid-logo-lockup", src: imgSrc, alt: "Available on: CommBank, NAB, ANZ Plus and Westpac" }) }));
+    const imgSrc = `https://cdn.connectid.com.au/images/idp-selector/logo-lockup/logo-lockup-${isDarkMode ? 'dark' : 'light'}2.svg`;
+    const dataTestId = `idp-logo-lockup-${isDarkMode ? 'dark' : 'light'}`;
+    return (_jsxs("div", { className: "cid-idp-selector-idp-logo-list-wrapper", "data-testid": "idp-logo-list-wrapper", children: [_jsx("span", { className: `cid-idp-selector-idp-logo-list-label ${isDarkMode ? 'cid-idp-selector-idp-logo-list-label--dark' : ''}`, "data-testid": "idp-logo-list-label", children: "Available on" }), _jsx("img", { "data-testid": dataTestId, className: "cid-idp-selector-idp-logo-list-logo", src: imgSrc, alt: "CommBank, NAB, ANZ Plus and Westpac" })] }));
 };

package/README.md

@@ -229,7 +229,7 @@ This is an optional field in addition with the widgets below the ConnectID butto
 
 ### <a name="showCompatibilityWarnings"></a>showCompatibilityWarnings option
 
-If set to `true`, a popup with compatibility warnings will be displayed after an IDP is selected, if the conditions are met. The popup will show information about the compatibility of the user's browser, device, incognito/private mode with the ConnectID flow and the user can decide whether they want to proceed or not.
+If set to `true`, a popup with compatibility warnings will be displayed after an IDP is selected, if the conditions are met. The popup will show information about the compatibility of the user's browser, device, incognito/private mode with the ConnectID flow.
 
 <details> 
   <summary>Show compatibility warnings</summary>
@@ -259,6 +259,12 @@ The SVG image below the ConnectID button has either option dark or light mode. B
 
 ## 🚀 Release Notes
 
+### 6.10.0-alpha.14 (Jul 18, 2025)
+- Compatibility warning popup adjustments.
+
+### 6.10.0-alpha.13 (Jul 18, 2025)
+- Remove `Available on` from IDP logo list image.
+
 ### 6.10.0-alpha.12 (Jul 17, 2025)
 - Add `role="img"` to participant list item.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@connectid-tools/idp-selector-react",
-  "version": "6.10.0-alpha.12",
+  "version": "6.10.0-alpha.14",
   "description": "React component for IDP Selector.",
   "main": "index.js",
   "type": "module",