@connectid-tools/idp-selector-react 6.4.1 → 6.5.0

package/Benefits.d.ts

@@ -1,4 +1,6 @@
 import './Benefits.css';
+import { IntroTextType } from './types';
 export declare const Benefits: React.FC<{
     full: boolean;
+    introTextType: IntroTextType;
 }>;

package/Benefits.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useContext } from 'react';
 import './Benefits.css';
 import { ThemeContext } from './ThemeContext';
-export const Benefits = ({ full }) => {
+export const Benefits = ({ full, introTextType }) => {
     const theme = useContext(ThemeContext);
     const defaultBenefits = [
         "Reduce the data you share online by only sharing what's required",
@@ -14,7 +14,15 @@ export const Benefits = ({ full }) => {
         'Details are only shared with your review and consent',
         'Accredited by the Australian government as an identity exchange',
     ];
+    const fullBenefitsBankDetails = [
+        "ConnectID doesn't see or store your information",
+        'No document uploads',
+        'Details are only shared with your review and consent',
+        'Accredited by the Australian government as an identity exchange',
+    ];
+    const bankDetailsIntroTextTypes = ['bank-details-plus-personal-info', 'bank-details-only'];
+    const adjustedFullBenefits = bankDetailsIntroTextTypes.includes(introTextType) ? fullBenefitsBankDetails : fullBenefits;
     const listItemClasses = `cid-idp-selector-benefit ${theme === 'light' ? 'cid-idp-selector-benefit--light' : ''}`;
-    const benefits = full ? fullBenefits : defaultBenefits;
+    const benefits = full ? adjustedFullBenefits : defaultBenefits;
     return (_jsx("ul", { className: `cid-idp-selector-benefits ${full ? 'cid-idp-selector-benefits--box' : ''} ${theme === 'light' ? 'cid-idp-selector-benefits--light' : ''}`, "data-testid": "benefits", children: benefits.map((benefit) => (_jsxs("li", { className: listItemClasses, "data-testid": "benefit-item", children: [_jsx("svg", { className: "cid-idp-selector-benefit-icon", width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M7.28025 8.71975L14.25 1.75L15.3105 2.8105L7.28025 10.8407L3 6.5605L4.0605 5.5L7.28025 8.71975Z" }) }), benefit] }))) }));
 };

package/CidButton.js

@@ -124,10 +124,12 @@ export const CidButton = ({ onProceed, claims, requiredClaims, rpLogoUrl, requir
     }
     const ctaText = `${label} with ConnectID`;
     const connectIdButtonTypeConfig = type ? typeConfigMap[type] : undefined;
-    return (_jsxs(ThemeContext.Provider, { value: theme, children: [showPopup && (_jsxs(_Fragment, { children: [_jsx(Overlay, { onClick: handleClosePopup }), _jsx(Popup, { onProceed: handleOnProceed, onCancel: handleClosePopup, onError: onError, certificationStatus: certificationStatus, popupTitle: ctaText, requiredCertifications: requiredCertifications, rpLogoUrl: rpLogoUrl, rpDataSharingDescription: rpDataSharingDescription, claims: claims, requiredClaims: requiredClaims, enableManualVerification: enableManualVerification, showAllParticipants: showAllParticipants, participants: participants, error: error, isLoading: isLoading })] })), (connectIdButtonTypeConfig === null || connectIdButtonTypeConfig === void 0 ? void 0 : connectIdButtonTypeConfig.hasIntro) && introTextType && _jsx(IntroText, { type: introTextType }), (connectIdButtonTypeConfig === null || connectIdButtonTypeConfig === void 0 ? void 0 : connectIdButtonTypeConfig.hasBenefits) && _jsx(Benefits, { full: type === 'full benefits' }), (connectIdButtonTypeConfig === null || connectIdButtonTypeConfig === void 0 ? void 0 : connectIdButtonTypeConfig.hasProcess) &&
+    return (_jsxs(ThemeContext.Provider, { value: theme, children: [showPopup && (_jsxs(_Fragment, { children: [_jsx(Overlay, { onClick: handleClosePopup }), _jsx(Popup, { onProceed: handleOnProceed, onCancel: handleClosePopup, onError: onError, certificationStatus: certificationStatus, popupTitle: ctaText, requiredCertifications: requiredCertifications, rpLogoUrl: rpLogoUrl, rpDataSharingDescription: rpDataSharingDescription, claims: claims, requiredClaims: requiredClaims, enableManualVerification: enableManualVerification, showAllParticipants: showAllParticipants, participants: participants, error: error, isLoading: isLoading })] })), (connectIdButtonTypeConfig === null || connectIdButtonTypeConfig === void 0 ? void 0 : connectIdButtonTypeConfig.hasIntro) && introTextType && _jsx(IntroText, { type: introTextType }), (connectIdButtonTypeConfig === null || connectIdButtonTypeConfig === void 0 ? void 0 : connectIdButtonTypeConfig.hasBenefits) && (_jsx(Benefits, { full: type === 'full benefits', introTextType: introTextType || 'verify-trust' })), (connectIdButtonTypeConfig === null || connectIdButtonTypeConfig === void 0 ? void 0 : connectIdButtonTypeConfig.hasProcess) &&
                 (type === 'full process' ? _jsx(FullProcess, { collapsible: fullProcessCollapsible }) : _jsx(Process, {})), _jsxs("button", { className: `
           cid-idp-selector-button cid-idp-selector-button--${theme} 
           ${size === 'large' ? 'cid-idp-selector-button--large' : ''} 
           ${type || showInfoContent ? 'cid-idp-selector-button--type' : ''}
-        `, onClick: handleButtonClick, type: "button", "data-testid": "cid-idp-selector-button", children: [_jsx("svg", { className: "cid-idp-selector-button-icon", viewBox: "0 0 132.37 157.84", children: _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" }) }), ctaText] }), showInfoContent && (_jsxs("div", { className: "cid-show-info-content", "data-testid": "cid-show-info-content", children: [!error && _jsx(IdpLogoList, { loading: isLoading, logoLockupStyle: logoLockupStyle }), (connectIdButtonTypeConfig === null || connectIdButtonTypeConfig === void 0 ? void 0 : connectIdButtonTypeConfig.hasInfo) && _jsx(CidButtonInfo, {}), (connectIdButtonTypeConfig === null || connectIdButtonTypeConfig === void 0 ? void 0 : connectIdButtonTypeConfig.hasHowItWorks) && _jsx(CidButtonHowItWorks, {}), (connectIdButtonTypeConfig === null || connectIdButtonTypeConfig === void 0 ? void 0 : connectIdButtonTypeConfig.hasLearnMore) && _jsx(LearnMore, {})] }))] }));
+        `, onClick: handleButtonClick, type: "button", "data-testid": "cid-idp-selector-button", children: [_jsx("svg", { className: "cid-idp-selector-button-icon", viewBox: "0 0 132.37 157.84", children: _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" }) }), ctaText] }), showInfoContent && (_jsxs("div", { className: "cid-show-info-content", "data-testid": "cid-show-info-content", children: [!error && _jsx(IdpLogoList, { loading: isLoading, logoLockupStyle: logoLockupStyle }), (connectIdButtonTypeConfig === null || connectIdButtonTypeConfig === void 0 ? void 0 : connectIdButtonTypeConfig.hasInfo) &&
+                        introTextType !== 'bank-details-plus-personal-info' &&
+                        introTextType !== 'bank-details-only' && _jsx(CidButtonInfo, {}), (connectIdButtonTypeConfig === null || connectIdButtonTypeConfig === void 0 ? void 0 : connectIdButtonTypeConfig.hasHowItWorks) && _jsx(CidButtonHowItWorks, {}), (connectIdButtonTypeConfig === null || connectIdButtonTypeConfig === void 0 ? void 0 : connectIdButtonTypeConfig.hasLearnMore) && _jsx(LearnMore, {})] }))] }));
 };

package/IntroText.js

@@ -6,7 +6,9 @@ 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.',
-    'sign-up': 'ConnectID lets you sign up using details stored with an organisation you already trust, like your bank.'
+    '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.',
 };
 export const IntroText = ({ type }) => {
     const theme = useContext(ThemeContext);

package/README.md

@@ -220,6 +220,9 @@ The SVG image below the ConnectID button has either option dark or light mode. B
 
 ## 🚀 Release Notes
 
+### 6.5.0 (Apr 28, 2025)
+- Add new `introTextType` options: `bank-details-only` and `bank-details-plus-personal-info`.
+
 ### 6.4.1 (Feb 24, 2025)
 - Update README. 
 - Add license file to bundle.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@connectid-tools/idp-selector-react",
-  "version": "6.4.1",
+  "version": "6.5.0",
   "description": "React component for IDP Selector.",
   "main": "index.js",
   "type": "module",
@@ -25,22 +25,22 @@
   },
   "homepage": "https://github.com/connectid-tools/idp-selector-react",
   "devDependencies": {
-    "@babel/preset-typescript": "^7.26.0",
-    "@types/node": "^22.13.5",
-    "@types/react": "^18.3.18",
-    "@types/react-dom": "^18.3.5",
+    "@babel/preset-typescript": "^7.27.0",
+    "@types/node": "^22.15.2",
+    "@types/react": "^18.3.20",
+    "@types/react-dom": "^18.3.6",
     "cypress": "^13.17.0",
     "jest-environment-jsdom": "^29.7.0",
-    "prettier": "^3.5.2",
+    "prettier": "^3.5.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "replace-in-file": "^8.3.0",
     "tsx": "^4.19.3",
-    "typescript": "^5.7.3",
-    "vite": "^5.4.14"
+    "typescript": "^5.8.3",
+    "vite": "^5.4.18"
   },
   "dependencies": {
-    "react-responsive": "^10.0.0",
-    "swr": "^2.3.2"
+    "react-responsive": "^10.0.1",
+    "swr": "^2.3.3"
   }
 }

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';
+export type IntroTextType = 'verify-trust' | 'verify-account' | 'power' | 'sign-up' | 'bank-details-plus-personal-info' | 'bank-details-only';
 export type CidButtonType = 'tiny' | 'medium benefits' | 'medium process' | 'full benefits' | 'full process';
 export type CidButtonTypeConfig = {
     hasIntro: boolean;