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

package/CidButton.d.ts

@@ -23,6 +23,7 @@ type CidButtonProps = {
     onError?: (error: string) => void;
     showCompatibilityWarnings?: boolean;
     supportIncognito?: boolean;
+    disableAnalytics?: boolean;
     forceMobile?: boolean;
     forceIos?: boolean;
     forceAndroid?: boolean;

package/CidButton.js

@@ -22,7 +22,7 @@ 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';
@@ -30,7 +30,7 @@ import detectIncognito from './incognito';
 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
+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, disableAnalytics = 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
@@ -42,7 +42,6 @@ forceBrowser = undefined, // only for testing purposes
             throw new Error(response.statusText);
         return response.json();
     }));
-    useAnalytics();
     const [showPopup, setShowPopup] = useState(false);
     const [isIncognito, setIsIncognito] = useState();
     const analyticsData = {
@@ -116,8 +115,14 @@ forceBrowser = undefined, // only for testing purposes
                 setIsIncognito(undefined);
                 incognito = undefined;
             }
-            analytics === null || analytics === void 0 ? void 0 : analytics.track('ConnectID Button Displayed', Object.assign(Object.assign({}, analyticsData), { incognito }));
+            initialiseAnalytics((analytics) => {
+                if (typeof analytics !== 'undefined') {
+                    analytics.track('ConnectID Button Displayed', Object.assign(Object.assign({}, analyticsData), { incognito }));
+                }
+            });
         });
+        if (disableAnalytics)
+            return;
         track();
     }, []);
     const getCompatibilityConfirmText = (compatibilityWarnings) => {
@@ -127,7 +132,9 @@ forceBrowser = undefined, // only for testing purposes
         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.';
     };
     const handleOnProceed = (authorisationServerId, authorisationServerName, authorisationServerCertifications) => {
-        analytics === null || analytics === void 0 ? void 0 : analytics.track('IDP Selected', Object.assign(Object.assign({}, analyticsData), { authorisationServerId, idp_name: authorisationServerName, incognito: isIncognito }));
+        if (typeof analytics !== 'undefined') {
+            analytics.track('IDP Selected', Object.assign(Object.assign({}, analyticsData), { authorisationServerId, idp_name: authorisationServerName, incognito: isIncognito }));
+        }
         setShowPopup(false);
         const isMobile = forceMobile || getDeviceType() === 'mobile';
         const idpHasAppCertification = hasCertification(authorisationServerCertifications, 'Channel', 'app');
@@ -154,11 +161,15 @@ forceBrowser = undefined, // only for testing purposes
     };
     const handleButtonClick = () => {
         setShowPopup(true);
-        analytics === null || analytics === void 0 ? void 0 : analytics.track('ConnectID Button Clicked', Object.assign(Object.assign({}, analyticsData), { incognito: isIncognito }));
+        if (typeof analytics !== 'undefined') {
+            analytics.track('ConnectID Button Clicked', Object.assign(Object.assign({}, analyticsData), { incognito: isIncognito }));
+        }
     };
     const handleClosePopup = () => {
         setShowPopup(false);
-        analytics === null || analytics === void 0 ? void 0 : analytics.track('IDP Selector Popup Close Button Clicked', Object.assign(Object.assign({}, analyticsData), { incognito: isIncognito }));
+        if (typeof analytics !== 'undefined') {
+            analytics.track('IDP Selector Popup Close Button Clicked', Object.assign(Object.assign({}, analyticsData), { incognito: isIncognito }));
+        }
     };
     if (!isRequiredClaimsValid(claims, requiredClaims)) {
         const errorMessage = `requiredClaims needs to be a subset of claims. claims: ${claims.join(', ')}; requiredClaims: ${requiredClaims === null || requiredClaims === void 0 ? void 0 : requiredClaims.join(', ')}.`;

package/CidButtonHowItWorks.js

@@ -1,20 +1,18 @@
 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)
-            return;
-        analytics.track('Link to External Page Clicked', {
-            source: 'how_does_it_work',
-            link_url: 'https://connectid.com.au/#use-cases',
-            rp_sub_brand: getCurrentUrlOrigin(),
-        });
+        if (typeof analytics !== 'undefined') {
+            analytics.track('Link to External Page Clicked', {
+                source: 'how_does_it_work',
+                link_url: 'https://connectid.com.au/#use-cases',
+                rp_sub_brand: getCurrentUrlOrigin(),
+            });
+        }
     };
     return (_jsx("a", { href: "https://connectid.com.au/#use-cases", onClick: handleClick, target: "_blank", tabIndex: 0, className: `cid-idp-selector-how-it-works ${theme === 'light' ? 'cid-idp-selector-how-it-works--light' : ''}`, "data-testid": "how-it-works", children: "How does it work?" }));
 };

package/LearnMore.js

@@ -2,19 +2,17 @@ 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)
-            return;
-        analytics.track('Link to External Page Clicked', {
-            source: 'learn_more',
-            link_url: 'https://www.connectid.com.au',
-            rp_sub_brand: getCurrentUrlOrigin(),
-        });
+        if (typeof analytics !== 'undefined') {
+            analytics.track('Link to External Page Clicked', {
+                source: 'learn_more',
+                link_url: 'https://www.connectid.com.au',
+                rp_sub_brand: getCurrentUrlOrigin(),
+            });
+        }
     };
     return (_jsxs("div", { className: `cid-idp-selector-learn-more ${theme === 'light' ? 'cid-idp-selector-learn-more--light' : ''}`, children: ["Visit", ' ', _jsx("a", { href: "https://www.connectid.com.au", onClick: handleClick, target: "_blank", tabIndex: 0, "data-testid": "learn-more", children: "connectid.com.au" }), ' ', "to learn more."] }));
 };

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);
@@ -101,12 +99,14 @@ export const Popup = ({ onProceed, onCancel, onError, claims, requiredClaims, sh
         }
     };
     const handleConnectIdLinkClicked = () => __awaiter(void 0, void 0, void 0, function* () {
-        analytics === null || analytics === void 0 ? void 0 : analytics.track('Link to External Page Clicked', {
-            source: 'what_is_connectid',
-            link_url: 'https://www.connectid.com.au',
-            rp_sub_brand: getCurrentUrlOrigin(),
-            incognito: isIncognito,
-        });
+        if (typeof analytics !== 'undefined') {
+            analytics.track('Link to External Page Clicked', {
+                source: 'what_is_connectid',
+                link_url: 'https://www.connectid.com.au',
+                rp_sub_brand: getCurrentUrlOrigin(),
+                incognito: isIncognito,
+            });
+        }
     });
     const renderClaimList = () => {
         return (_jsx("ul", { id: "cid-idp-selector-popup-claims", className: `cid-idp-selector-popup-claims ${showClaims ? 'cid-idp-selector-popup-claims--visible' : ''}`, "data-testid": "claims", children: sortClaims(claims).map((claim) => (_jsxs("li", { className: "cid-idp-selector-popup-claim", "data-testid": `claim-${claim}`, children: [_jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16Z", fill: "#BEEDD2" }), _jsx("path", { d: "M4.81445 8.14121L6.95437 10.2811L11.472 5.76465", stroke: "#262626", strokeWidth: "1.7", strokeLinecap: "round" })] }), claimsDescription[claim]] }, claim))) }));

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.6 (Jun 26, 2025)
+- Add `disableAnalytics` option.
+
+### 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.
 

package/analytics.d.ts

@@ -1 +1,2 @@
-export declare const useAnalytics: () => void;
+import { Analytics } from "./types";
+export declare const initialiseAnalytics: (onLoad: (analytics: Analytics) => void) => void;

package/analytics.js

@@ -1,8 +1,11 @@
 const PROD_WRITE_KEY = 'LrD9CEGUEy1O3s73nGbaGcyTqELujozJ';
 const DEV_WRITE_KEY = 'PWlESErGso9uTimwmGB7SsnxCpKF8pRl';
 const WRITE_KEY = 'production' === 'production' ? PROD_WRITE_KEY : DEV_WRITE_KEY;
-export const useAnalytics = () => {
-    // copied from https://segment.com/docs/connections/sources/catalog/libraries/website/javascript/quickstart/
+export const initialiseAnalytics = (onLoad) => {
+    // adapted from https://segment.com/docs/connections/sources/catalog/libraries/website/javascript/quickstart/
+    // to handle RSC
+    if (typeof window === 'undefined')
+        return;
     // @ts-ignore
     // Create a queue, but don't obliterate an existing one!
     var analytics = (window.analytics = window.analytics || []);
@@ -74,6 +77,9 @@ export const useAnalytics = () => {
         // @ts-ignore
         first.parentNode.insertBefore(script, first);
         analytics._loadOptions = options;
+        script.onload = function () {
+            onLoad(analytics);
+        };
     };
     analytics._writeKey = WRITE_KEY;
     // Add a version to keep track of what's in the wild.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@connectid-tools/idp-selector-react",
-  "version": "6.10.0-alpha.4",
+  "version": "6.10.0-alpha.6",
   "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.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "replace-in-file": "^8.3.0",