@connectid-tools/idp-selector-react 6.10.0-alpha.3 → 6.10.0-alpha.4

package/CidButton.d.ts

@@ -1,6 +1,6 @@
 import './CidButton.css';
 import './global.css';
-import { CertificationStatus, CidButtonLabel, CidButtonSize, CidButtonTheme, CidButtonType, Claim, CompatibilityWarnings, IntroTextType, LogoMode, RequiredCertification } from './types';
+import { Browser, CertificationStatus, CidButtonLabel, CidButtonSize, CidButtonTheme, CidButtonType, Claim, CompatibilityWarnings, IntroTextType, LogoMode, RequiredCertification } from './types';
 type CidButtonProps = {
     onProceed: (authorisationServerId: string, compatibilityWarnings: CompatibilityWarnings) => void;
     claims: Claim[];
@@ -27,6 +27,7 @@ type CidButtonProps = {
     forceIos?: boolean;
     forceAndroid?: boolean;
     forceIncognito?: boolean;
+    forceBrowser?: Browser;
 };
 export declare const CidButton: React.FC<CidButtonProps>;
 export {};

package/CidButton.js

@@ -27,13 +27,14 @@ import './global.css';
 import { getCurrentUrlOrigin } from './navigator';
 import { isIntroTextTypeValid, isRequiredClaimsValid } from './validator';
 import detectIncognito from './incognito';
-import { getDeviceType, isAndroid, isChromeBrowser, isIos, isSamsungBrowser } from './userAgent';
+import { getBrowserName, getDeviceType, isAndroid, isIos } from './userAgent';
 import { hasCertification } from './certification';
 import { getCompatibility } from './compatibility';
 export const CidButton = ({ onProceed, claims, requiredClaims, rpLogoUrl, requiredCertifications, label = 'Verify', size = 'regular', type, introTextType, fullProcessCollapsible = false, participantsUri = 'https://data.directory.connectid.com.au/participants', certificationStatus = 'Active', rpDataSharingDescription = 'Your details will be shared with the current website.', enableManualVerification = false, showAllParticipants = false, theme = 'dark', logoLockupStyle = 'light', showInfoContent = false, onError = () => { }, showCompatibilityWarnings = false, supportIncognito = false, forceMobile = false, // only for testing purposes
 forceIos = false, // only for testing purposes
 forceAndroid = false, // only for testing purposes
 forceIncognito = false, // only for testing purposes
+forceBrowser = undefined, // only for testing purposes
  }) => {
     const { data: participants, error, isLoading, } = useSWR(participantsUri, () => __awaiter(void 0, void 0, void 0, function* () {
         const response = yield fetch(participantsUri);
@@ -137,8 +138,7 @@ forceIncognito = false, // only for testing purposes
             isIncognito: forceIncognito || !!isIncognito,
             isAndroid: forceAndroid || isAndroid(),
             isIos: forceIos || isIos(),
-            isSamsungBrowser: isSamsungBrowser(),
-            isChromeBrowser: isChromeBrowser(),
+            browser: forceBrowser || getBrowserName(),
         });
         if (showCompatibilityWarnings && compatibility.mightFail) {
             const confirmText = getCompatibilityConfirmText(compatibility);

package/README.md

@@ -259,6 +259,9 @@ The SVG image below the ConnectID button has either option dark or light mode. B
 
 ## 🚀 Release Notes
 
+### 6.10.0-alpha.4 (Jun 20, 2025)
+- Add test support for Samsung and Chrome browsers.
+
 ### 6.10.0-alpha.3 (Jun 20, 2025)
 - Add `supportIncognito` option.
 

package/compatibility.d.ts

@@ -1,3 +1,3 @@
 import { CompatibilityEnvironment, CompatibilityWarnings } from './types';
 export declare const getCompatibility: (env: CompatibilityEnvironment) => CompatibilityWarnings;
-export declare const getMightFail: (env: Pick<CompatibilityEnvironment, "supportIncognito" | "idpHasAppCertification" | "isMobile" | "isIncognito" | "isAndroid" | "isIos" | "isSamsungBrowser" | "isChromeBrowser">) => boolean;
+export declare const getMightFail: (env: Pick<CompatibilityEnvironment, "supportIncognito" | "idpHasAppCertification" | "isMobile" | "isIncognito" | "isAndroid" | "isIos" | "browser">) => boolean;

package/compatibility.js

@@ -1,6 +1,5 @@
-import { getBrowserName } from './userAgent';
 export const getCompatibility = (env) => {
-    const { supportIncognito, idpHasAppCertification, isAndroid, isChromeBrowser, isIncognito, isMobile, isSamsungBrowser, isIos, } = env;
+    const { supportIncognito, idpHasAppCertification, isAndroid, isIncognito, isMobile, isIos, browser } = env;
     const mightFail = getMightFail({
         supportIncognito,
         idpHasAppCertification,
@@ -8,26 +7,25 @@ export const getCompatibility = (env) => {
         isIncognito,
         isAndroid,
         isIos,
-        isSamsungBrowser,
-        isChromeBrowser,
+        browser
     });
     return {
         isMobile,
         isIncognito,
         mobileOs: isAndroid ? 'android' : isIos ? 'ios' : 'other',
-        browser: getBrowserName(),
+        browser,
         mightFail,
     };
 };
 export const getMightFail = (env) => {
-    const { supportIncognito, idpHasAppCertification, isMobile, isIncognito, isAndroid, isChromeBrowser, isSamsungBrowser, isIos, } = env;
+    const { supportIncognito, idpHasAppCertification, isMobile, isIncognito, isAndroid, isIos, browser } = env;
     if (!idpHasAppCertification || !isMobile) {
         return false;
     }
-    if (!supportIncognito && isIncognito && isAndroid && isChromeBrowser) {
+    if (!supportIncognito && isIncognito && isAndroid && browser === 'chrome') {
         return true;
     }
-    if (isAndroid && isSamsungBrowser) {
+    if (isAndroid && browser === 'samsung') {
         return true;
     }
     if (!supportIncognito && isIncognito && isIos) {

package/compatibility.test.js

@@ -10,8 +10,7 @@ describe('getCompatibility', () => {
             isIncognito: false,
             isAndroid: false,
             isIos: false,
-            isSamsungBrowser: false,
-            isChromeBrowser: false,
+            browser: 'other',
         });
         assert.deepStrictEqual(compatibility, {
             isMobile: true,
@@ -31,8 +30,7 @@ describe('getMightFail', () => {
             isIncognito: false,
             isAndroid: false,
             isIos: false,
-            isSamsungBrowser: false,
-            isChromeBrowser: false,
+            browser: 'other',
         });
         assert.ok(mightFail === false);
     });
@@ -44,8 +42,7 @@ describe('getMightFail', () => {
             isIncognito: false,
             isAndroid: false,
             isIos: false,
-            isSamsungBrowser: false,
-            isChromeBrowser: false,
+            browser: 'other',
         });
         assert.ok(mightFail === false);
     });
@@ -57,8 +54,7 @@ describe('getMightFail', () => {
             isIncognito: true,
             isAndroid: true,
             isIos: false,
-            isSamsungBrowser: false,
-            isChromeBrowser: true,
+            browser: 'chrome',
         });
         assert.ok(mightFail === true);
     });
@@ -70,8 +66,7 @@ describe('getMightFail', () => {
             isIncognito: true,
             isAndroid: true,
             isIos: false,
-            isSamsungBrowser: false,
-            isChromeBrowser: true,
+            browser: 'chrome',
         });
         assert.ok(mightFail === false);
     });
@@ -83,8 +78,7 @@ describe('getMightFail', () => {
             isIncognito: false,
             isAndroid: true,
             isIos: false,
-            isSamsungBrowser: true,
-            isChromeBrowser: false,
+            browser: 'samsung',
         });
         assert.ok(mightFail === true);
     });
@@ -96,8 +90,7 @@ describe('getMightFail', () => {
             isIncognito: true,
             isAndroid: false,
             isIos: true,
-            isSamsungBrowser: false,
-            isChromeBrowser: false,
+            browser: 'safari',
         });
         assert.ok(mightFail === true);
     });
@@ -109,8 +102,7 @@ describe('getMightFail', () => {
             isIncognito: true,
             isAndroid: false,
             isIos: true,
-            isSamsungBrowser: false,
-            isChromeBrowser: false,
+            browser: 'safari',
         });
         assert.ok(mightFail === false);
     });
@@ -122,8 +114,7 @@ describe('getMightFail', () => {
             isIncognito: false,
             isAndroid: false,
             isIos: false,
-            isSamsungBrowser: false,
-            isChromeBrowser: false,
+            browser: 'other',
         });
         assert.ok(mightFail === false);
     });

package/package.json

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

package/types.d.ts

@@ -38,6 +38,7 @@ export type CidButtonTypeConfig = {
     hasHowItWorks: boolean;
     hasLearnMore: boolean;
 };
+export type Browser = 'chrome' | 'samsung' | 'safari' | 'firefox' | 'other';
 export type CompatibilityEnvironment = {
     supportIncognito: boolean;
     isMobile: boolean;
@@ -45,13 +46,12 @@ export type CompatibilityEnvironment = {
     idpHasAppCertification: boolean;
     isAndroid: boolean;
     isIos: boolean;
-    isSamsungBrowser: boolean;
-    isChromeBrowser: boolean;
+    browser: Browser;
 };
 export type CompatibilityWarnings = {
     mightFail: boolean;
     isMobile: boolean;
     isIncognito: boolean;
     mobileOs: 'android' | 'ios' | 'other';
-    browser: 'chrome' | 'samsung' | 'safari' | 'firefox' | 'other';
+    browser: Browser;
 };

package/userAgent.d.ts

@@ -2,6 +2,4 @@ import { Device } from './types';
 export declare const getDeviceType: () => Device;
 export declare const isAndroid: () => boolean;
 export declare const isIos: () => boolean;
-export declare const isChromeBrowser: () => boolean;
-export declare const isSamsungBrowser: () => boolean;
 export declare const getBrowserName: () => "other" | "chrome" | "samsung" | "safari" | "firefox";

package/userAgent.js

@@ -10,8 +10,6 @@ export const getDeviceType = () => {
 };
 export const isAndroid = () => /Android/i.test(navigator.userAgent);
 export const isIos = () => /iPhone|iPad|iPod/i.test(navigator.userAgent);
-export const isChromeBrowser = () => /Chrome/.test(navigator.userAgent) && !/Edg|OPR|Brave/.test(navigator.userAgent);
-export const isSamsungBrowser = () => /SamsungBrowser/.test(navigator.userAgent);
 export const getBrowserName = () => {
     const ua = navigator.userAgent.toLowerCase();
     if (ua.includes('samsungbrowser')) {