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

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

@@ -22,18 +22,20 @@ import { Overlay } from './Overlay';
 import { Popup } from './Popup';
 import { Process } from './Process';
 import { ThemeContext } from './ThemeContext';
-import { useAnalytics } from './analytics';
+import { initialiseAnalytics } from './analytics';
 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';
+initialiseAnalytics();
 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);
@@ -41,7 +43,6 @@ forceIncognito = false, // only for testing purposes
             throw new Error(response.statusText);
         return response.json();
     }));
-    useAnalytics();
     const [showPopup, setShowPopup] = useState(false);
     const [isIncognito, setIsIncognito] = useState();
     const analyticsData = {
@@ -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/CidButtonHowItWorks.js

@@ -1,11 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useAnalytics } from './analytics';
 import { getCurrentUrlOrigin } from './navigator';
 import './CidButtonHowItWorks.css';
 import { ThemeContext } from './ThemeContext';
 import { useContext } from 'react';
 export const CidButtonHowItWorks = () => {
-    useAnalytics();
     const theme = useContext(ThemeContext);
     const handleClick = () => {
         if (!analytics)

package/LearnMore.js

@@ -2,10 +2,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useContext } from 'react';
 import './LearnMore.css';
 import { ThemeContext } from './ThemeContext';
-import { useAnalytics } from './analytics';
 import { getCurrentUrlOrigin } from './navigator';
 export const LearnMore = () => {
-    useAnalytics();
     const theme = useContext(ThemeContext);
     const handleClick = () => {
         if (!analytics)

package/Popup.js

@@ -11,7 +11,6 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useEffect, useRef, useState } from 'react';
 import ReactDOM from 'react-dom';
 import { useMediaQuery } from 'react-responsive';
-import { useAnalytics } from './analytics';
 import { filterAuthorisationServers, getManualAuthorisationServer } from './certification';
 import './global.css';
 import { InfoBox } from './InfoBox';
@@ -25,7 +24,6 @@ export const Popup = ({ onProceed, onCancel, onError, claims, requiredClaims, sh
     const [isIncognito, setIsIncognito] = useState();
     const [showClaims, setShowClaims] = useState(false); // mobile only
     const popupRef = useRef(null);
-    useAnalytics();
     const isMobile = useMediaQuery({ query: '(max-width: 482px)' });
     const infoboxLinkRef = useRef(null);
     const closeButtonRef = useRef(null);

package/README.md

@@ -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.5 (Jun 25, 2025)
+- Fix analytics double loading.
+
+### 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/analytics.d.ts

@@ -1 +1 @@
-export declare const useAnalytics: () => void;
+export declare const initialiseAnalytics: () => void;

package/analytics.js

@@ -1,7 +1,7 @@
 const PROD_WRITE_KEY = 'LrD9CEGUEy1O3s73nGbaGcyTqELujozJ';
 const DEV_WRITE_KEY = 'PWlESErGso9uTimwmGB7SsnxCpKF8pRl';
 const WRITE_KEY = 'production' === 'production' ? PROD_WRITE_KEY : DEV_WRITE_KEY;
-export const useAnalytics = () => {
+export const initialiseAnalytics = () => {
     // copied from https://segment.com/docs/connections/sources/catalog/libraries/website/javascript/quickstart/
     // @ts-ignore
     // Create a queue, but don't obliterate an existing one!

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.5",
   "description": "React component for IDP Selector.",
   "main": "index.js",
   "type": "module",
@@ -26,12 +26,12 @@
   "homepage": "https://github.com/connectid-tools/idp-selector-react",
   "devDependencies": {
     "@babel/preset-typescript": "^7.27.1",
-    "@types/node": "^22.15.32",
+    "@types/node": "^22.15.33",
     "@types/react": "^18.3.23",
     "@types/react-dom": "^18.3.7",
     "cypress": "^14.5.0",
     "jest-environment-jsdom": "^29.7.0",
-    "prettier": "^3.5.3",
+    "prettier": "^3.6.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "replace-in-file": "^8.3.0",

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')) {