Skip to content

Commit 3d4d35e

Browse files
0x7f0x7f
committed
Add CMP wrapper for Consentmanager
1 parent b7f1c09 commit 3d4d35e

13 files changed

Lines changed: 740 additions & 0 deletions

‎packages/react-native-contentpass-cmp-consentmanager/README.md‎

Lines changed: 146 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,146 @@
1+
# @contentpass/react-native-contentpass-cmp-consentmanager
2+
3+
A [Consentmanager](https://www.consentmanager.net/) CMP adapter for `@contentpass/react-native-contentpass`. Bridges the Consentmanager SDK (`cm-sdk-react-native-v3`) to the Contentpass `CmpAdapter` interface, so the Contentpass consent layer can manage consent through Consentmanager.
4+
5+
## Installation
6+
7+
```bash
8+
npm install @contentpass/react-native-contentpass-cmp-consentmanager
9+
# or
10+
yarn add @contentpass/react-native-contentpass-cmp-consentmanager
11+
```
12+
13+
### Peer dependencies
14+
15+
- `@contentpass/react-native-contentpass`
16+
- `cm-sdk-react-native-v3` — the Consentmanager React Native SDK must be installed and configured in your project
17+
18+
## Usage
19+
20+
First, initialize the Consentmanager SDK, then create the adapter using `createConsentmanagerCmpAdapter`:
21+
22+
```tsx
23+
import CmSdkReactNativeV3, {
24+
setUrlConfig,
25+
setWebViewConfig,
26+
checkAndOpen,
27+
WebViewPosition,
28+
BackgroundStyle,
29+
BlurEffectStyle,
30+
} from 'cm-sdk-react-native-v3';
31+
import { createConsentmanagerCmpAdapter } from '@contentpass/react-native-contentpass-cmp-consentmanager';
32+
import type { CmpAdapter } from '@contentpass/react-native-contentpass';
33+
34+
// 1. Configure the Consentmanager SDK
35+
await setWebViewConfig({
36+
position: WebViewPosition.FullScreen,
37+
backgroundStyle: BackgroundStyle.dimmed('black', 0.5),
38+
});
39+
40+
await setUrlConfig({
41+
id: 'YOUR_CODE_ID',
42+
domain: 'delivery.consentmanager.net',
43+
language: 'EN',
44+
appName: 'MyApp',
45+
});
46+
47+
// 2. Initialize consent checking
48+
await checkAndOpen(false);
49+
50+
// 3. Create the CMP adapter
51+
const cmpAdapter: CmpAdapter = await createConsentmanagerCmpAdapter(CmSdkReactNativeV3);
52+
```
53+
54+
The returned `cmpAdapter` can then be passed to `ContentpassConsentGate` from `@contentpass/react-native-contentpass-ui`, or used directly via the `CmpAdapter` interface.
55+
56+
### Full example
57+
58+
```tsx
59+
import { useEffect, useState } from 'react';
60+
import { View, Text } from 'react-native';
61+
import CmSdkReactNativeV3, {
62+
setUrlConfig,
63+
setWebViewConfig,
64+
checkAndOpen,
65+
WebViewPosition,
66+
BackgroundStyle,
67+
} from 'cm-sdk-react-native-v3';
68+
import { ContentpassSdkProvider } from '@contentpass/react-native-contentpass';
69+
import { ContentpassConsentGate } from '@contentpass/react-native-contentpass-ui';
70+
import { createConsentmanagerCmpAdapter } from '@contentpass/react-native-contentpass-cmp-consentmanager';
71+
import type { CmpAdapter } from '@contentpass/react-native-contentpass';
72+
73+
export default function App() {
74+
const [cmpAdapter, setCmpAdapter] = useState<CmpAdapter | null>(null);
75+
76+
useEffect(() => {
77+
async function init() {
78+
await setWebViewConfig({
79+
position: WebViewPosition.FullScreen,
80+
backgroundStyle: BackgroundStyle.dimmed('black', 0.5),
81+
});
82+
await setUrlConfig({
83+
id: 'YOUR_CODE_ID',
84+
domain: 'delivery.consentmanager.net',
85+
language: 'EN',
86+
appName: 'MyApp',
87+
});
88+
await checkAndOpen(false);
89+
const adapter = await createConsentmanagerCmpAdapter(CmSdkReactNativeV3);
90+
setCmpAdapter(adapter);
91+
}
92+
93+
init().catch((error) => console.error('Failed to initialize CMP', error));
94+
}, []);
95+
96+
if (!cmpAdapter) {
97+
return <Text>Loading...</Text>;
98+
}
99+
100+
return (
101+
<ContentpassSdkProvider contentpassConfig={contentpassConfig}>
102+
<ContentpassConsentGate
103+
cmpAdapter={cmpAdapter}
104+
contentpassConfig={contentpassConfig}
105+
>
106+
<View>
107+
<Text>Your app content</Text>
108+
</View>
109+
</ContentpassConsentGate>
110+
</ContentpassSdkProvider>
111+
);
112+
}
113+
```
114+
115+
For further details on the Consentmanager SDK, see their [official documentation](https://help.consentmanager.net/books/cmp/page/reactnative-1-consentmanager-sdk-integration-9b0).
116+
117+
## API
118+
119+
### `createConsentmanagerCmpAdapter(sdk)`
120+
121+
Factory function that creates a `CmpAdapter` from an initialized Consentmanager SDK instance.
122+
123+
| Parameter | Type | Description |
124+
|-----------|------|-------------|
125+
| `sdk` | `CmSdkReactNativeV3Module` | The Consentmanager SDK default export (after `setUrlConfig` and `checkAndOpen` have been called). |
126+
127+
Returns `Promise<CmpAdapter>`.
128+
129+
The adapter fetches user status from the Consentmanager SDK during creation and automatically extracts purpose IDs and the vendor count.
130+
131+
### `CmpAdapter` methods provided
132+
133+
| Method | Description |
134+
|--------|-------------|
135+
| `acceptAll()` | Programmatically accepts all consent purposes via Consentmanager. |
136+
| `denyAll()` | Programmatically rejects all consent purposes via Consentmanager. |
137+
| `hasFullConsent()` | Checks whether all consent purposes are granted by querying each purpose status. |
138+
| `onConsentStatusChange(callback)` | Registers a listener that fires whenever full-consent status changes. Returns an unsubscribe function. |
139+
| `showSecondLayer(view)` | Opens the Consentmanager consent layer settings page via `forceOpen(true)`. The returned promise resolves when the user dismisses it. |
140+
| `getRequiredPurposes()` | Returns the list of purpose identifiers extracted from the Consentmanager user status. |
141+
| `getNumberOfVendors()` | Returns the vendor count from the Consentmanager user status. |
142+
| `waitForInit()` | Resolves immediately (Consentmanager initialization is handled before adapter creation). |
143+
144+
## License
145+
146+
MIT

‎packages/react-native-contentpass-cmp-consentmanager/babel.config.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
module.exports = require('../../babel.config');

‎packages/react-native-contentpass-cmp-consentmanager/jest-setup.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
// Jest setup file

‎packages/react-native-contentpass-cmp-consentmanager/jest.config.json‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{
2+
"preset": "react-native",
3+
"setupFilesAfterEnv": ["./jest-setup.ts"],
4+
"transform": {
5+
"^.+\\.(js|ts|tsx)$": "babel-jest"
6+
},
7+
"modulePathIgnorePatterns": [
8+
"./lib/",
9+
"./ios/",
10+
"./android/"
11+
],
12+
"moduleNameMapper": {
13+
"^cm-sdk-react-native-v3$": "<rootDir>/src/__mocks__/cm-sdk-react-native-v3.ts"
14+
}
15+
}

‎packages/react-native-contentpass-cmp-consentmanager/package.json‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
{
2+
"name": "@contentpass/react-native-contentpass-cmp-consentmanager",
3+
"version": "0.1.0",
4+
"description": "Contentpass Consentmanager CMP adapter",
5+
"source": "./src/index.ts",
6+
"main": "./lib/commonjs/index.js",
7+
"module": "./lib/module/index.js",
8+
"exports": {
9+
".": {
10+
"import": {
11+
"types": "./lib/typescript/react-native-contentpass-cmp-consentmanager/src/index.d.ts",
12+
"default": "./lib/module/index.js"
13+
},
14+
"require": {
15+
"types": "./lib/typescript/react-native-contentpass-cmp-consentmanager/src/index.d.ts",
16+
"default": "./lib/commonjs/index.js"
17+
}
18+
}
19+
},
20+
"types": "./lib/typescript/react-native-contentpass-cmp-consentmanager/src/index.d.ts",
21+
"files": [
22+
"lib",
23+
"!**/*.test.ts",
24+
"!**/*.test.tsx",
25+
"!**/__tests__",
26+
"!**/__fixtures__",
27+
"!**/__mocks__",
28+
"!**/.*"
29+
],
30+
"scripts": {
31+
"test": "jest --coverage",
32+
"typecheck": "tsc",
33+
"prepare": "bob build"
34+
},
35+
"keywords": [
36+
"contentpass",
37+
"react-native",
38+
"cmp",
39+
"consentmanager"
40+
],
41+
"repository": {
42+
"type": "git",
43+
"url": "git+https://github.com/contentpass/react-native-contentpass.git"
44+
},
45+
"author": "contentpass <dev@contentpass.de> (https://github.com/contentpass)",
46+
"license": "MIT",
47+
"bugs": {
48+
"url": "https://github.com/contentpass/react-native-contentpass/issues"
49+
},
50+
"homepage": "https://github.com/contentpass/react-native-contentpass#readme",
51+
"publishConfig": {
52+
"registry": "https://registry.npmjs.org/",
53+
"access": "public"
54+
},
55+
"peerDependencies": {
56+
"@contentpass/react-native-contentpass": "*",
57+
"cm-sdk-react-native-v3": "*"
58+
},
59+
"devDependencies": {
60+
"@contentpass/react-native-contentpass": "workspace:*",
61+
"@react-native-community/cli": "20.1.1",
62+
"@react-native/babel-preset": "0.83.1",
63+
"@types/jest": "^30.0.0",
64+
"@types/react": "^19.2.10",
65+
"jest": "^30.2.0",
66+
"react": "19.2.4",
67+
"react-native": "0.83.1",
68+
"react-native-builder-bob": "^0.40.17",
69+
"typescript": "^5.9.3"
70+
},
71+
"react-native-builder-bob": {
72+
"source": "src",
73+
"exclude": "**/{__tests__,__fixtures__,__mocks__}/**",
74+
"output": "lib",
75+
"targets": [
76+
"commonjs",
77+
"module",
78+
[
79+
"typescript",
80+
{
81+
"project": "tsconfig.build.json"
82+
}
83+
]
84+
]
85+
}
86+
}

0 commit comments

Comments
 (0)