@stromcom/react-snippet 0.1.0 → 0.3.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +110 -13
- package/dist/index.cjs +11 -3
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.ts +14 -0
- package/dist/index.js +11 -3
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/src/StromcomConf.jsx +11 -0
- package/src/StromcomProvider.jsx +5 -1
- package/src/__tests__/StromcomConf.test.jsx +36 -0
- package/src/__tests__/StromcomProvider.test.jsx +20 -0
- package/src/index.d.ts +14 -0
package/README.md
CHANGED
|
@@ -137,12 +137,13 @@ Never pass raw internal IDs from the client.
|
|
|
137
137
|
|
|
138
138
|
### `<StromcomProvider>`
|
|
139
139
|
|
|
140
|
-
| Prop | Type | Required | Description
|
|
141
|
-
| -------------- | ----------------------------------------- | -------- |
|
|
142
|
-
| `clientKey` | `string` | ✅ | Project client key.
|
|
143
|
-
| `clientSecret` | `string` | ✅ | Project bearer token.
|
|
144
|
-
| `environment` | `"production"` \| `"staging"` \| `string` | | Default `"production"`. Pass any custom URL to point at a self-hosted loader.
|
|
145
|
-
| `dataLayer` | `string` | | Default `"stromCom"`. The global JS variable name. Change it if `stromCom` collides with something else on the page.
|
|
140
|
+
| Prop | Type | Required | Description |
|
|
141
|
+
| -------------- | ----------------------------------------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
142
|
+
| `clientKey` | `string` | ✅ | Project client key. |
|
|
143
|
+
| `clientSecret` | `string` | ✅ | Project bearer token. |
|
|
144
|
+
| `environment` | `"production"` \| `"staging"` \| `string` | | Default `"production"`. Pass any custom URL to point at a self-hosted loader. |
|
|
145
|
+
| `dataLayer` | `string` | | Default `"stromCom"`. The global JS variable name. Change it if `stromCom` collides with something else on the page. |
|
|
146
|
+
| `language` | `string` | | Initial UI language (e.g. `"cs"`, `"en"`, `"sk"`). Any code is accepted; one without a translation falls back to the browser language, then English. Omit to auto-detect from the browser. To change it at runtime, use `<StromcomConf language>`. |
|
|
146
147
|
|
|
147
148
|
### `<StromcomUser>`
|
|
148
149
|
|
|
@@ -184,13 +185,15 @@ Sends SDK configuration. Place once inside the provider, before threads.
|
|
|
184
185
|
|
|
185
186
|
Notable options:
|
|
186
187
|
|
|
187
|
-
| Prop | Type | Description
|
|
188
|
-
| ----------------------------- | ----------------------------------------- |
|
|
189
|
-
| `notificationRenderer` | `Function` | Custom notification rendering function.
|
|
190
|
-
| `onNotification` | `Function` | Called when unread count changes.
|
|
191
|
-
| `pageCSSPath` | `string` | CSS file URL injected into the widget iframe.
|
|
192
|
-
| `notificationElementPosition` | `1\|2\|3\|4` | Icon position: 1=TL, 2=TR, 3=BR, 4=BL.
|
|
193
|
-
| `
|
|
188
|
+
| Prop | Type | Description |
|
|
189
|
+
| ----------------------------- | ----------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
190
|
+
| `notificationRenderer` | `Function` | Custom notification rendering function. |
|
|
191
|
+
| `onNotification` | `Function` | Called when unread count changes. |
|
|
192
|
+
| `pageCSSPath` | `string` | CSS file URL injected into the widget iframe. |
|
|
193
|
+
| `notificationElementPosition` | `1\|2\|3\|4` | Icon position: 1=TL, 2=TR, 3=BR, 4=BL. |
|
|
194
|
+
| `language` | `string\|null` | UI language. Any code is accepted; one without a translation falls back to the browser language, then English. `null` follows the browser. Overrides `<StromcomProvider language>`. |
|
|
195
|
+
| `theme` | `"stromcom-light"\|"stromcom-dark"\|null` | Theme. `null` follows browser preference. |
|
|
196
|
+
| `entityResolve` | `Function` | `async ({type, id}) => detail` — resolves business-entity detail (order, ticket…) for the message editor's chip hover-card. |
|
|
194
197
|
|
|
195
198
|
See [`src/StromcomConf.jsx`](./src/StromcomConf.jsx) for the full list.
|
|
196
199
|
|
|
@@ -230,6 +233,98 @@ The provider is SSR-safe — it only touches `window` inside `useEffect`. The lo
|
|
|
230
233
|
|
|
231
234
|
For the App Router, mount `<StromcomProvider>` in a Client Component placed inside your root layout. Server Components above it stay server-rendered. See [`examples/02-nextjs-app-router/`](./examples/02-nextjs-app-router).
|
|
232
235
|
|
|
236
|
+
## Content Security Policy
|
|
237
|
+
|
|
238
|
+
If your site sends a `Content-Security-Policy` header, the STROMCOM origins have to be allowed. The directives below are **additive** — merge them into your existing policy. With a restrictive `default-src` (e.g. `'none'` or `'self'`) all five must be listed explicitly.
|
|
239
|
+
|
|
240
|
+
### Production
|
|
241
|
+
|
|
242
|
+
| Directive | Add | Why |
|
|
243
|
+
| ------------- | ------------------------- | ----------------------------------------------------------- |
|
|
244
|
+
| `script-src` | `https://cdn.stromcom.cz` | Loader script, and the widget snippet it pulls in |
|
|
245
|
+
| `connect-src` | `https://www.stromcom.cz` | Notification polling against `/api/app/v1/` |
|
|
246
|
+
| `style-src` | `https://cdn.stromcom.cz` | Widget stylesheets (shadow root + `client.css` in `<head>`) |
|
|
247
|
+
| `img-src` | `data:` | SVG icons embedded in the widget CSS (loading spinner) |
|
|
248
|
+
| `frame-src` | `https://app.stromcom.cz` | The iframe hosting threads and the notification center |
|
|
249
|
+
|
|
250
|
+
As a single header:
|
|
251
|
+
|
|
252
|
+
```
|
|
253
|
+
Content-Security-Policy:
|
|
254
|
+
script-src 'self' https://cdn.stromcom.cz;
|
|
255
|
+
connect-src 'self' https://www.stromcom.cz;
|
|
256
|
+
style-src 'self' https://cdn.stromcom.cz;
|
|
257
|
+
img-src 'self' data:;
|
|
258
|
+
frame-src https://app.stromcom.cz;
|
|
259
|
+
```
|
|
260
|
+
|
|
261
|
+
### Staging
|
|
262
|
+
|
|
263
|
+
Same directives with the staging hosts — use these when the provider runs with `environment="staging"`.
|
|
264
|
+
|
|
265
|
+
| Directive | Add |
|
|
266
|
+
| ------------- | --------------------------------- |
|
|
267
|
+
| `script-src` | `https://cdn.staging.stromcom.cz` |
|
|
268
|
+
| `connect-src` | `https://staging.stromcom.cz` |
|
|
269
|
+
| `style-src` | `https://cdn.staging.stromcom.cz` |
|
|
270
|
+
| `frame-src` | `https://app.staging.stromcom.cz` |
|
|
271
|
+
|
|
272
|
+
`img-src data:` is the same in both environments.
|
|
273
|
+
|
|
274
|
+
If you pass a full URL to `environment` (self-hosted or branch-preview loader, see [`examples/09-staging-environment.jsx`](./examples/09-staging-environment.jsx)), put that host in `script-src` instead.
|
|
275
|
+
|
|
276
|
+
### `'unsafe-inline'` is not required
|
|
277
|
+
|
|
278
|
+
`<StromcomProvider>` injects the loader with `document.createElement('script')` from `useEffect` — it never emits an inline `<script>` block, so **`script-src 'unsafe-inline'` is not needed**. This is a deliberate difference from [`stromcom/php-snippet`](https://github.com/stromcom/php-snippet), which renders the same bootstrap as an inline `<script>` and therefore needs `'unsafe-inline'` or a nonce.
|
|
279
|
+
|
|
280
|
+
`style-src 'unsafe-inline'` is not needed either: widget styles are applied as constructable stylesheets inside the shadow root. The `style` props on `<StromcomThread>` and `<StromcomHome>` are applied by React through the CSSOM, which CSP does not restrict.
|
|
281
|
+
|
|
282
|
+
### What you do **not** have to allow
|
|
283
|
+
|
|
284
|
+
Avatars, attachments, fonts, and uploaded media are loaded **inside the widget iframe**, on the STROMCOM app origin. Your page's CSP does not apply to them — keep `font-src`, `media-src` and attachment hosts out of your policy.
|
|
285
|
+
|
|
286
|
+
Two `<StromcomConf>` options are worth knowing about:
|
|
287
|
+
|
|
288
|
+
| Option | Loaded where | Effect on your CSP |
|
|
289
|
+
| ---------------------------- | ----------------- | -------------------------------------------------------------------- |
|
|
290
|
+
| `notificationElementCSSPath` | Your page | Its host must be in your `style-src` (`'self'` if you host the file) |
|
|
291
|
+
| `pageCSSPath` | Inside the iframe | None — your page's CSP does not reach inside the iframe |
|
|
292
|
+
|
|
293
|
+
### Next.js
|
|
294
|
+
|
|
295
|
+
Static headers in `next.config.js` are the simplest fit — STROMCOM needs no per-request nonce.
|
|
296
|
+
|
|
297
|
+
```js
|
|
298
|
+
// next.config.js
|
|
299
|
+
const isDev = process.env.NODE_ENV === 'development';
|
|
300
|
+
|
|
301
|
+
// 'unsafe-inline' / 'unsafe-eval' below are Next.js' own requirements
|
|
302
|
+
// (hydration bootstrap, styled-jsx, dev HMR) — STROMCOM needs neither.
|
|
303
|
+
const contentSecurityPolicy = [
|
|
304
|
+
"default-src 'self'",
|
|
305
|
+
`script-src 'self' 'unsafe-inline'${isDev ? " 'unsafe-eval'" : ''} https://cdn.stromcom.cz`,
|
|
306
|
+
"style-src 'self' 'unsafe-inline' https://cdn.stromcom.cz",
|
|
307
|
+
`connect-src 'self' https://www.stromcom.cz${isDev ? ' ws:' : ''}`,
|
|
308
|
+
"img-src 'self' data:",
|
|
309
|
+
'frame-src https://app.stromcom.cz',
|
|
310
|
+
"base-uri 'self'",
|
|
311
|
+
"form-action 'self'",
|
|
312
|
+
].join('; ');
|
|
313
|
+
|
|
314
|
+
export default {
|
|
315
|
+
async headers() {
|
|
316
|
+
return [
|
|
317
|
+
{
|
|
318
|
+
source: '/:path*',
|
|
319
|
+
headers: [{ key: 'Content-Security-Policy', value: contentSecurityPolicy }],
|
|
320
|
+
},
|
|
321
|
+
];
|
|
322
|
+
},
|
|
323
|
+
};
|
|
324
|
+
```
|
|
325
|
+
|
|
326
|
+
Swap in the staging hosts when you build for staging. If you already generate a per-request nonce in `middleware.js` (the approach in the Next.js CSP guide), just add the same STROMCOM entries to the directives you build there — the nonce itself is irrelevant to the widget.
|
|
327
|
+
|
|
233
328
|
## Troubleshooting
|
|
234
329
|
|
|
235
330
|
**The loader script never appears.** Check that `clientKey` and `clientSecret` are non-empty. The provider does nothing on the server.
|
|
@@ -240,6 +335,8 @@ For the App Router, mount `<StromcomProvider>` in a Client Component placed insi
|
|
|
240
335
|
|
|
241
336
|
**Two providers warn / double script.** Don't mount the provider twice. The provider deduplicates the `<script>` tag, but mounting two providers with different `clientKey`s is unsupported.
|
|
242
337
|
|
|
338
|
+
**Console shows `Refused to load…` / CSP violations.** Your page sends a `Content-Security-Policy` header that doesn't list the STROMCOM origins. See [Content Security Policy](#content-security-policy) — the reported directive tells you which line is missing.
|
|
339
|
+
|
|
243
340
|
**Notification count never fires.** Make sure `<StromcomConf onNotification={...}>` is mounted as a child of the provider, and that `<StromcomUser>` runs (notifications are user-scoped).
|
|
244
341
|
|
|
245
342
|
## License
|
package/dist/index.cjs
CHANGED
|
@@ -73,6 +73,7 @@ function StromcomProvider({
|
|
|
73
73
|
clientSecret,
|
|
74
74
|
dataLayer = "stromCom",
|
|
75
75
|
environment = "production",
|
|
76
|
+
language,
|
|
76
77
|
children
|
|
77
78
|
}) {
|
|
78
79
|
const layer = setupLayer(dataLayer);
|
|
@@ -89,10 +90,11 @@ function StromcomProvider({
|
|
|
89
90
|
script.dataset.dl = dl;
|
|
90
91
|
script.dataset.ck = clientKey;
|
|
91
92
|
script.dataset.cs = clientSecret;
|
|
93
|
+
if (language) script.dataset.lang = language;
|
|
92
94
|
script.src = `${base}?${clientKey}`;
|
|
93
95
|
document.head.appendChild(script);
|
|
94
96
|
return () => script.remove();
|
|
95
|
-
}, [clientKey, clientSecret, dataLayer, environment]);
|
|
97
|
+
}, [clientKey, clientSecret, dataLayer, environment, language]);
|
|
96
98
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StromcomContext.Provider, { value: layer, children });
|
|
97
99
|
}
|
|
98
100
|
function useStromcom() {
|
|
@@ -130,7 +132,9 @@ function StromcomConf({
|
|
|
130
132
|
homeBeforeRender,
|
|
131
133
|
notificationElementBeforeRender,
|
|
132
134
|
notificationElementAfterRender,
|
|
133
|
-
|
|
135
|
+
language,
|
|
136
|
+
theme,
|
|
137
|
+
entityResolve
|
|
134
138
|
}) {
|
|
135
139
|
const sc = useStromcom();
|
|
136
140
|
(0, import_react3.useEffect)(() => {
|
|
@@ -156,7 +160,9 @@ function StromcomConf({
|
|
|
156
160
|
opts.notificationElementBeforeRender = notificationElementBeforeRender;
|
|
157
161
|
if (notificationElementAfterRender !== void 0)
|
|
158
162
|
opts.notificationElementAfterRender = notificationElementAfterRender;
|
|
163
|
+
if (language !== void 0) opts.language = language;
|
|
159
164
|
if (theme !== void 0) opts.theme = theme;
|
|
165
|
+
if (entityResolve !== void 0) opts.entityResolve = entityResolve;
|
|
160
166
|
sc.conf(opts);
|
|
161
167
|
}, [
|
|
162
168
|
sc,
|
|
@@ -172,7 +178,9 @@ function StromcomConf({
|
|
|
172
178
|
homeBeforeRender,
|
|
173
179
|
notificationElementBeforeRender,
|
|
174
180
|
notificationElementAfterRender,
|
|
175
|
-
|
|
181
|
+
language,
|
|
182
|
+
theme,
|
|
183
|
+
entityResolve
|
|
176
184
|
]);
|
|
177
185
|
return null;
|
|
178
186
|
}
|
package/dist/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.js","../src/StromcomProvider.jsx","../src/StromcomUser.jsx","../src/StromcomConf.jsx","../src/StromcomThread.jsx","../src/StromcomHome.jsx"],"sourcesContent":["export { StromcomProvider, useStromcom } from './StromcomProvider.jsx';\nexport { StromcomUser } from './StromcomUser.jsx';\nexport { StromcomConf } from './StromcomConf.jsx';\nexport { StromcomThread } from './StromcomThread.jsx';\nexport { StromcomHome } from './StromcomHome.jsx';\n","import { createContext, useContext, useEffect } from 'react';\n\nexport const StromcomContext = createContext(null);\n\nconst LOADER_URLS = {\n production: 'https://cdn.stromcom.cz/loader.js',\n staging: 'https://cdn.staging.stromcom.cz/loader.js',\n};\n\n/**\n * Sets up the stromCom stub layer synchronously so that child components can\n * queue calls (initUser, thread, conf, home) before the async loader.js arrives.\n * Mirrors what the PHP snippet() method generates.\n */\nfunction setupLayer(dataLayer) {\n if (typeof window === 'undefined') {\n return null;\n }\n\n if (window[dataLayer]?.__sc_ready) {\n return window[dataLayer];\n }\n\n const dl = dataLayer + 'DL';\n window[dl] = window[dl] || {};\n window[dataLayer] = window[dataLayer] || {};\n const layer = window[dataLayer];\n\n const stub = (method, dlKey, isArray) => {\n dlKey = dlKey || method;\n if (isArray) {\n window[dl][dlKey] = window[dl][dlKey] || [];\n }\n\n layer[method] = (...args) => {\n if (isArray) {\n window[dl][dlKey].push(args);\n } else {\n window[dl][dlKey] = args;\n }\n };\n };\n\n stub('initUser', 'user');\n stub('thread', 'threads', true);\n stub('conf');\n stub('home', 'home', true);\n\n layer.__sc_ready = true;\n return layer;\n}\n\n/**\n * Wraps the app and loads the Stromcom widget SDK.\n *\n * @param {object} props\n * @param {string} props.clientKey - Client key from the Stromcom dashboard\n * @param {string} props.clientSecret - Bearer token from the Stromcom dashboard\n * @param {string} [props.dataLayer] - Global JS variable name (default: \"stromCom\")\n * @param {string} [props.environment] - \"production\" | \"staging\" | full custom loader URL\n * @param {React.ReactNode} props.children\n *\n * @example\n * <StromcomProvider clientKey=\"ck_xxx\" clientSecret=\"cs_xxx\">\n * <App />\n * </StromcomProvider>\n */\nexport function StromcomProvider({\n clientKey,\n clientSecret,\n dataLayer = 'stromCom',\n environment = 'production',\n children,\n}) {\n // Set up stubs synchronously so children can queue calls immediately on render.\n const layer = setupLayer(dataLayer);\n\n useEffect(() => {\n if (typeof window === 'undefined') return;\n\n // Avoid injecting the script twice (React StrictMode, HMR, etc.)\n if (document.querySelector(`script[data-ck=\"${clientKey}\"][data-type=\"stromcom\"]`)) return;\n\n const base = LOADER_URLS[environment] ?? environment;\n const dl = dataLayer + 'DL';\n\n const script = document.createElement('script');\n script.async = true;\n script.dataset.type = 'stromcom';\n script.dataset.l = dataLayer;\n script.dataset.dl = dl;\n script.dataset.ck = clientKey;\n script.dataset.cs = clientSecret;\n script.src = `${base}?${clientKey}`;\n document.head.appendChild(script);\n\n return () => script.remove();\n }, [clientKey, clientSecret, dataLayer, environment]);\n\n return <StromcomContext.Provider value={layer}>{children}</StromcomContext.Provider>;\n}\n\nexport function useStromcom() {\n return useContext(StromcomContext);\n}\n","import { useEffect } from 'react';\nimport { useStromcom } from './StromcomProvider.jsx';\n\n/**\n * Identifies the currently logged-in user.\n * Re-calls initUser whenever any prop changes.\n *\n * IMPORTANT: The `code` should already be hashed server-side (HMAC + base-62).\n * Never pass your raw internal user ID directly from the client.\n *\n * @param {object} props\n * @param {string} props.code - Hashed unique user identifier (max 100 chars, [a-zA-Z0-9-_])\n * @param {string} [props.name] - Display name\n * @param {string} [props.emailAddress]- Used for email notifications\n * @param {boolean} [props.readOnly] - When true, user can read but not send messages\n * @param {string} [props.avatarURL] - Full URL to avatar image\n *\n * @example\n * <StromcomUser\n * code={user.stromcomHash}\n * name={user.name}\n * emailAddress={user.email}\n * />\n */\nexport function StromcomUser({ code, name, emailAddress, readOnly, avatarURL }) {\n const sc = useStromcom();\n\n useEffect(() => {\n if (!sc) return;\n\n const opts = { code };\n if (name !== undefined) opts.name = name;\n if (emailAddress !== undefined) opts.emailAddress = emailAddress;\n if (readOnly !== undefined) opts.readOnly = readOnly;\n if (avatarURL !== undefined) opts.avatarURL = avatarURL;\n\n sc.initUser(opts);\n }, [sc, code, name, emailAddress, readOnly, avatarURL]);\n\n return null;\n}\n","import { useEffect } from 'react';\nimport { useStromcom } from './StromcomProvider.jsx';\n\n/**\n * Sends SDK configuration to the Stromcom widget.\n * Should be placed once inside <StromcomProvider>, before threads or the home component.\n * Re-sends conf whenever any option prop changes.\n *\n * Options that accept functions (notificationRenderer, onNotification, etc.) take\n * actual JS functions here — no need for the string-wrapping used in the PHP library.\n *\n * @param {object} [props.notificationRenderer] - Function(notification) for custom notification rendering\n * @param {object} [props.onNotification] - Function(count) called when unread count changes\n * @param {string} [props.pageCSSPath] - URL of CSS file injected into the widget iframe\n * @param {Function} [props.notificationElementTargetElement] - Function/Promise/Element returning the icon mount target\n * @param {boolean} [props.notificationElementShowAlways] - Show icon even with zero notifications\n * @param {number} [props.notificationElementPosition] - Icon position: 1=top-left 2=top-right 3=bottom-right 4=bottom-left\n * @param {object} [props.notificationElementStyles] - Inline styles object for the default notification button\n * @param {string} [props.notificationElementCSSPath] - CSS URL for the default notification renderer\n * @param {boolean} [props.notificationElementNoShadowRoot]- Disable shadow-root for notifications\n * @param {Function} [props.homeBeforeRender] - Callback before notification center opens\n * @param {Function} [props.notificationElementBeforeRender]- Callback before notification icon renders\n * @param {Function} [props.notificationElementAfterRender] - Callback after notification icon renders\n * @param {('stromcom-light'|'stromcom-dark'|null)} [props.theme] - Theme. null follows browser preference.\n *\n * @example\n * <StromcomConf\n * notificationElementPosition={4}\n * onNotification={(count) => setBadge(count)}\n * />\n */\nexport function StromcomConf({\n notificationRenderer,\n onNotification,\n pageCSSPath,\n notificationElementTargetElement,\n notificationElementShowAlways,\n notificationElementPosition,\n notificationElementStyles,\n notificationElementCSSPath,\n notificationElementNoShadowRoot,\n homeBeforeRender,\n notificationElementBeforeRender,\n notificationElementAfterRender,\n theme,\n}) {\n const sc = useStromcom();\n\n useEffect(() => {\n if (!sc) return;\n\n const opts = {};\n\n if (notificationRenderer !== undefined) opts.notificationRenderer = notificationRenderer;\n if (onNotification !== undefined) opts.onNotification = onNotification;\n if (pageCSSPath !== undefined) opts.pageCSSPath = pageCSSPath;\n if (notificationElementTargetElement !== undefined)\n opts.notificationElementTargetElement = notificationElementTargetElement;\n if (notificationElementShowAlways !== undefined)\n opts.notificationElementShowAlways = notificationElementShowAlways;\n if (notificationElementPosition !== undefined)\n opts.notificationElementPosition = notificationElementPosition;\n if (notificationElementStyles !== undefined)\n opts.notificationElementStyles = notificationElementStyles;\n if (notificationElementCSSPath !== undefined)\n opts.notificationElementCSSPath = notificationElementCSSPath;\n if (notificationElementNoShadowRoot !== undefined)\n opts.notificationElementNoShadowRoot = notificationElementNoShadowRoot;\n if (homeBeforeRender !== undefined) opts.homeBeforeRender = homeBeforeRender;\n if (notificationElementBeforeRender !== undefined)\n opts.notificationElementBeforeRender = notificationElementBeforeRender;\n if (notificationElementAfterRender !== undefined)\n opts.notificationElementAfterRender = notificationElementAfterRender;\n if (theme !== undefined) opts.theme = theme;\n\n sc.conf(opts);\n }, [\n sc,\n notificationRenderer,\n onNotification,\n pageCSSPath,\n notificationElementTargetElement,\n notificationElementShowAlways,\n notificationElementPosition,\n notificationElementStyles,\n notificationElementCSSPath,\n notificationElementNoShadowRoot,\n homeBeforeRender,\n notificationElementBeforeRender,\n notificationElementAfterRender,\n theme,\n ]);\n\n return null;\n}\n","import { useEffect, useRef } from 'react';\nimport { useStromcom } from './StromcomProvider.jsx';\n\n/**\n * Embeds a Stromcom conversation thread into the rendered div.\n * The thread is initialized once on mount.\n *\n * IMPORTANT: The `code` should already be hashed server-side (HMAC + base-62).\n *\n * @param {object} props\n * @param {string} props.code - Hashed unique thread identifier (max 100 chars, [a-zA-Z0-9-_])\n * @param {string} [props.name] - Display name shown in the thread header\n * @param {string} [props.url] - Canonical URL of the page (shown as link in header)\n * @param {boolean} [props.userHint] - Enable @mention suggestions (default: true)\n * @param {string} [props.className] - CSS class for the container div\n * @param {object} [props.style] - Inline styles for the container div\n *\n * @example\n * <StromcomThread\n * code={order.stromcomHash}\n * name={`Order #${order.id}`}\n * url={window.location.href}\n * style={{ height: '400px' }}\n * />\n */\nexport function StromcomThread({ code, name, url, userHint, className, style, ...rest }) {\n const sc = useStromcom();\n const containerRef = useRef(null);\n const initializedRef = useRef(false);\n\n useEffect(() => {\n if (!sc || !containerRef.current || initializedRef.current) return;\n\n const opts = { code };\n if (name !== undefined) opts.name = name;\n if (url !== undefined) opts.url = url;\n if (userHint !== undefined) opts.userHint = userHint;\n\n sc.thread(containerRef.current, opts);\n initializedRef.current = true;\n // eslint-disable-next-line react-hooks/exhaustive-deps -- intentionally omit option deps, thread cannot be re-initialized\n }, [sc]);\n\n return <div ref={containerRef} className={className} style={style} {...rest} />;\n}\n","import { useEffect, useRef } from 'react';\nimport { useStromcom } from './StromcomProvider.jsx';\n\n/**\n * Embeds the Stromcom notification center into the rendered div.\n * Initialized once on mount.\n *\n * @param {object} [props.className] - CSS class for the container div\n * @param {object} [props.style] - Inline styles for the container div\n *\n * @example\n * <StromcomHome style={{ position: 'fixed', bottom: 24, right: 24 }} />\n */\nexport function StromcomHome({ className, style, ...rest }) {\n const sc = useStromcom();\n const containerRef = useRef(null);\n const initializedRef = useRef(false);\n\n useEffect(() => {\n if (!sc || !containerRef.current || initializedRef.current) return;\n sc.home(containerRef.current);\n initializedRef.current = true;\n }, [sc]);\n\n return <div ref={containerRef} className={className} style={style} {...rest} />;\n}\n"],"mappings":"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","names":["import_react","import_react","import_react","import_jsx_runtime","import_react","import_jsx_runtime"]}
|
|
1
|
+
{"version":3,"sources":["../src/index.js","../src/StromcomProvider.jsx","../src/StromcomUser.jsx","../src/StromcomConf.jsx","../src/StromcomThread.jsx","../src/StromcomHome.jsx"],"sourcesContent":["export { StromcomProvider, useStromcom } from './StromcomProvider.jsx';\nexport { StromcomUser } from './StromcomUser.jsx';\nexport { StromcomConf } from './StromcomConf.jsx';\nexport { StromcomThread } from './StromcomThread.jsx';\nexport { StromcomHome } from './StromcomHome.jsx';\n","import { createContext, useContext, useEffect } from 'react';\n\nexport const StromcomContext = createContext(null);\n\nconst LOADER_URLS = {\n production: 'https://cdn.stromcom.cz/loader.js',\n staging: 'https://cdn.staging.stromcom.cz/loader.js',\n};\n\n/**\n * Sets up the stromCom stub layer synchronously so that child components can\n * queue calls (initUser, thread, conf, home) before the async loader.js arrives.\n * Mirrors what the PHP snippet() method generates.\n */\nfunction setupLayer(dataLayer) {\n if (typeof window === 'undefined') {\n return null;\n }\n\n if (window[dataLayer]?.__sc_ready) {\n return window[dataLayer];\n }\n\n const dl = dataLayer + 'DL';\n window[dl] = window[dl] || {};\n window[dataLayer] = window[dataLayer] || {};\n const layer = window[dataLayer];\n\n const stub = (method, dlKey, isArray) => {\n dlKey = dlKey || method;\n if (isArray) {\n window[dl][dlKey] = window[dl][dlKey] || [];\n }\n\n layer[method] = (...args) => {\n if (isArray) {\n window[dl][dlKey].push(args);\n } else {\n window[dl][dlKey] = args;\n }\n };\n };\n\n stub('initUser', 'user');\n stub('thread', 'threads', true);\n stub('conf');\n stub('home', 'home', true);\n\n layer.__sc_ready = true;\n return layer;\n}\n\n/**\n * Wraps the app and loads the Stromcom widget SDK.\n *\n * @param {object} props\n * @param {string} props.clientKey - Client key from the Stromcom dashboard\n * @param {string} props.clientSecret - Bearer token from the Stromcom dashboard\n * @param {string} [props.dataLayer] - Global JS variable name (default: \"stromCom\")\n * @param {string} [props.environment] - \"production\" | \"staging\" | full custom loader URL\n * @param {string} [props.language] - Initial UI language (e.g. \"cs\", \"en\", \"sk\"). Omit to auto-detect from the\n * browser. Use StromcomConf's `language` prop to change it at runtime.\n * @param {React.ReactNode} props.children\n *\n * @example\n * <StromcomProvider clientKey=\"ck_xxx\" clientSecret=\"cs_xxx\">\n * <App />\n * </StromcomProvider>\n */\nexport function StromcomProvider({\n clientKey,\n clientSecret,\n dataLayer = 'stromCom',\n environment = 'production',\n language,\n children,\n}) {\n // Set up stubs synchronously so children can queue calls immediately on render.\n const layer = setupLayer(dataLayer);\n\n useEffect(() => {\n if (typeof window === 'undefined') return;\n\n // Avoid injecting the script twice (React StrictMode, HMR, etc.)\n if (document.querySelector(`script[data-ck=\"${clientKey}\"][data-type=\"stromcom\"]`)) return;\n\n const base = LOADER_URLS[environment] ?? environment;\n const dl = dataLayer + 'DL';\n\n const script = document.createElement('script');\n script.async = true;\n script.dataset.type = 'stromcom';\n script.dataset.l = dataLayer;\n script.dataset.dl = dl;\n script.dataset.ck = clientKey;\n script.dataset.cs = clientSecret;\n if (language) script.dataset.lang = language;\n script.src = `${base}?${clientKey}`;\n document.head.appendChild(script);\n\n return () => script.remove();\n }, [clientKey, clientSecret, dataLayer, environment, language]);\n\n return <StromcomContext.Provider value={layer}>{children}</StromcomContext.Provider>;\n}\n\nexport function useStromcom() {\n return useContext(StromcomContext);\n}\n","import { useEffect } from 'react';\nimport { useStromcom } from './StromcomProvider.jsx';\n\n/**\n * Identifies the currently logged-in user.\n * Re-calls initUser whenever any prop changes.\n *\n * IMPORTANT: The `code` should already be hashed server-side (HMAC + base-62).\n * Never pass your raw internal user ID directly from the client.\n *\n * @param {object} props\n * @param {string} props.code - Hashed unique user identifier (max 100 chars, [a-zA-Z0-9-_])\n * @param {string} [props.name] - Display name\n * @param {string} [props.emailAddress]- Used for email notifications\n * @param {boolean} [props.readOnly] - When true, user can read but not send messages\n * @param {string} [props.avatarURL] - Full URL to avatar image\n *\n * @example\n * <StromcomUser\n * code={user.stromcomHash}\n * name={user.name}\n * emailAddress={user.email}\n * />\n */\nexport function StromcomUser({ code, name, emailAddress, readOnly, avatarURL }) {\n const sc = useStromcom();\n\n useEffect(() => {\n if (!sc) return;\n\n const opts = { code };\n if (name !== undefined) opts.name = name;\n if (emailAddress !== undefined) opts.emailAddress = emailAddress;\n if (readOnly !== undefined) opts.readOnly = readOnly;\n if (avatarURL !== undefined) opts.avatarURL = avatarURL;\n\n sc.initUser(opts);\n }, [sc, code, name, emailAddress, readOnly, avatarURL]);\n\n return null;\n}\n","import { useEffect } from 'react';\nimport { useStromcom } from './StromcomProvider.jsx';\n\n/**\n * Sends SDK configuration to the Stromcom widget.\n * Should be placed once inside <StromcomProvider>, before threads or the home component.\n * Re-sends conf whenever any option prop changes.\n *\n * Options that accept functions (notificationRenderer, onNotification, etc.) take\n * actual JS functions here — no need for the string-wrapping used in the PHP library.\n *\n * @param {object} [props.notificationRenderer] - Function(notification) for custom notification rendering\n * @param {object} [props.onNotification] - Function(count) called when unread count changes\n * @param {string} [props.pageCSSPath] - URL of CSS file injected into the widget iframe\n * @param {Function} [props.notificationElementTargetElement] - Function/Promise/Element returning the icon mount target\n * @param {boolean} [props.notificationElementShowAlways] - Show icon even with zero notifications\n * @param {number} [props.notificationElementPosition] - Icon position: 1=top-left 2=top-right 3=bottom-right 4=bottom-left\n * @param {object} [props.notificationElementStyles] - Inline styles object for the default notification button\n * @param {string} [props.notificationElementCSSPath] - CSS URL for the default notification renderer\n * @param {boolean} [props.notificationElementNoShadowRoot]- Disable shadow-root for notifications\n * @param {Function} [props.homeBeforeRender] - Callback before notification center opens\n * @param {Function} [props.notificationElementBeforeRender]- Callback before notification icon renders\n * @param {Function} [props.notificationElementAfterRender] - Callback after notification icon renders\n * @param {(string|null)} [props.language] - UI language. Any code is accepted; one without a translation falls\n * back to the browser language, then English. null follows the browser. Overrides the `language`\n * prop on StromcomProvider, which is only the initial value; this one\n * can be changed at runtime.\n * @param {('stromcom-light'|'stromcom-dark'|null)} [props.theme] - Theme. null follows browser preference.\n * @param {Function} [props.entityResolve] - async ({type, id}) => detail; resolves business-entity detail for the message editor's chip hover-card\n *\n * @example\n * <StromcomConf\n * notificationElementPosition={4}\n * onNotification={(count) => setBadge(count)}\n * />\n */\nexport function StromcomConf({\n notificationRenderer,\n onNotification,\n pageCSSPath,\n notificationElementTargetElement,\n notificationElementShowAlways,\n notificationElementPosition,\n notificationElementStyles,\n notificationElementCSSPath,\n notificationElementNoShadowRoot,\n homeBeforeRender,\n notificationElementBeforeRender,\n notificationElementAfterRender,\n language,\n theme,\n entityResolve,\n}) {\n const sc = useStromcom();\n\n useEffect(() => {\n if (!sc) return;\n\n const opts = {};\n\n if (notificationRenderer !== undefined) opts.notificationRenderer = notificationRenderer;\n if (onNotification !== undefined) opts.onNotification = onNotification;\n if (pageCSSPath !== undefined) opts.pageCSSPath = pageCSSPath;\n if (notificationElementTargetElement !== undefined)\n opts.notificationElementTargetElement = notificationElementTargetElement;\n if (notificationElementShowAlways !== undefined)\n opts.notificationElementShowAlways = notificationElementShowAlways;\n if (notificationElementPosition !== undefined)\n opts.notificationElementPosition = notificationElementPosition;\n if (notificationElementStyles !== undefined)\n opts.notificationElementStyles = notificationElementStyles;\n if (notificationElementCSSPath !== undefined)\n opts.notificationElementCSSPath = notificationElementCSSPath;\n if (notificationElementNoShadowRoot !== undefined)\n opts.notificationElementNoShadowRoot = notificationElementNoShadowRoot;\n if (homeBeforeRender !== undefined) opts.homeBeforeRender = homeBeforeRender;\n if (notificationElementBeforeRender !== undefined)\n opts.notificationElementBeforeRender = notificationElementBeforeRender;\n if (notificationElementAfterRender !== undefined)\n opts.notificationElementAfterRender = notificationElementAfterRender;\n if (language !== undefined) opts.language = language;\n if (theme !== undefined) opts.theme = theme;\n if (entityResolve !== undefined) opts.entityResolve = entityResolve;\n\n sc.conf(opts);\n }, [\n sc,\n notificationRenderer,\n onNotification,\n pageCSSPath,\n notificationElementTargetElement,\n notificationElementShowAlways,\n notificationElementPosition,\n notificationElementStyles,\n notificationElementCSSPath,\n notificationElementNoShadowRoot,\n homeBeforeRender,\n notificationElementBeforeRender,\n notificationElementAfterRender,\n language,\n theme,\n entityResolve,\n ]);\n\n return null;\n}\n","import { useEffect, useRef } from 'react';\nimport { useStromcom } from './StromcomProvider.jsx';\n\n/**\n * Embeds a Stromcom conversation thread into the rendered div.\n * The thread is initialized once on mount.\n *\n * IMPORTANT: The `code` should already be hashed server-side (HMAC + base-62).\n *\n * @param {object} props\n * @param {string} props.code - Hashed unique thread identifier (max 100 chars, [a-zA-Z0-9-_])\n * @param {string} [props.name] - Display name shown in the thread header\n * @param {string} [props.url] - Canonical URL of the page (shown as link in header)\n * @param {boolean} [props.userHint] - Enable @mention suggestions (default: true)\n * @param {string} [props.className] - CSS class for the container div\n * @param {object} [props.style] - Inline styles for the container div\n *\n * @example\n * <StromcomThread\n * code={order.stromcomHash}\n * name={`Order #${order.id}`}\n * url={window.location.href}\n * style={{ height: '400px' }}\n * />\n */\nexport function StromcomThread({ code, name, url, userHint, className, style, ...rest }) {\n const sc = useStromcom();\n const containerRef = useRef(null);\n const initializedRef = useRef(false);\n\n useEffect(() => {\n if (!sc || !containerRef.current || initializedRef.current) return;\n\n const opts = { code };\n if (name !== undefined) opts.name = name;\n if (url !== undefined) opts.url = url;\n if (userHint !== undefined) opts.userHint = userHint;\n\n sc.thread(containerRef.current, opts);\n initializedRef.current = true;\n // eslint-disable-next-line react-hooks/exhaustive-deps -- intentionally omit option deps, thread cannot be re-initialized\n }, [sc]);\n\n return <div ref={containerRef} className={className} style={style} {...rest} />;\n}\n","import { useEffect, useRef } from 'react';\nimport { useStromcom } from './StromcomProvider.jsx';\n\n/**\n * Embeds the Stromcom notification center into the rendered div.\n * Initialized once on mount.\n *\n * @param {object} [props.className] - CSS class for the container div\n * @param {object} [props.style] - Inline styles for the container div\n *\n * @example\n * <StromcomHome style={{ position: 'fixed', bottom: 24, right: 24 }} />\n */\nexport function StromcomHome({ className, style, ...rest }) {\n const sc = useStromcom();\n const containerRef = useRef(null);\n const initializedRef = useRef(false);\n\n useEffect(() => {\n if (!sc || !containerRef.current || initializedRef.current) return;\n sc.home(containerRef.current);\n initializedRef.current = true;\n }, [sc]);\n\n return <div ref={containerRef} className={className} style={style} {...rest} />;\n}\n"],"mappings":"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","names":["import_react","import_react","import_react","import_jsx_runtime","import_react","import_jsx_runtime"]}
|
package/dist/index.d.ts
CHANGED
|
@@ -19,6 +19,12 @@ export interface StromcomProviderProps {
|
|
|
19
19
|
dataLayer?: string;
|
|
20
20
|
/** `"production"`, `"staging"`, or a full custom loader URL. Default `"production"`. */
|
|
21
21
|
environment?: StromcomEnvironment;
|
|
22
|
+
/**
|
|
23
|
+
* Initial UI language (e.g. `"cs"`, `"en"`, `"sk"`). Any code is accepted; one without a
|
|
24
|
+
* translation falls back to the browser language, then English. Omit to auto-detect from the browser.
|
|
25
|
+
* Use `StromcomConf`'s `language` prop to change it at runtime.
|
|
26
|
+
*/
|
|
27
|
+
language?: string;
|
|
22
28
|
children?: ReactNode;
|
|
23
29
|
}
|
|
24
30
|
|
|
@@ -78,8 +84,16 @@ export interface StromcomConfOptions {
|
|
|
78
84
|
homeBeforeRender?: () => void | Promise<void>;
|
|
79
85
|
notificationElementBeforeRender?: () => void | Promise<void>;
|
|
80
86
|
notificationElementAfterRender?: () => void;
|
|
87
|
+
/**
|
|
88
|
+
* UI language, or `null` to follow the browser. Any language code is accepted;
|
|
89
|
+
* one the widget has no translation for falls back to the browser language, then English.
|
|
90
|
+
* Overrides `StromcomProviderProps.language`, which is only the initial value.
|
|
91
|
+
*/
|
|
92
|
+
language?: string | null;
|
|
81
93
|
/** Theme: `"stromcom-light"`, `"stromcom-dark"`, or `null` to follow browser preference. */
|
|
82
94
|
theme?: 'stromcom-light' | 'stromcom-dark' | null;
|
|
95
|
+
/** Resolves business-entity detail (order, ticket…) for the message editor's chip hover-card. */
|
|
96
|
+
entityResolve?: (entity: { type: string; id: string }) => unknown | Promise<unknown>;
|
|
83
97
|
}
|
|
84
98
|
|
|
85
99
|
export function StromcomConf(props: StromcomConfOptions): null;
|
package/dist/index.js
CHANGED
|
@@ -43,6 +43,7 @@ function StromcomProvider({
|
|
|
43
43
|
clientSecret,
|
|
44
44
|
dataLayer = "stromCom",
|
|
45
45
|
environment = "production",
|
|
46
|
+
language,
|
|
46
47
|
children
|
|
47
48
|
}) {
|
|
48
49
|
const layer = setupLayer(dataLayer);
|
|
@@ -59,10 +60,11 @@ function StromcomProvider({
|
|
|
59
60
|
script.dataset.dl = dl;
|
|
60
61
|
script.dataset.ck = clientKey;
|
|
61
62
|
script.dataset.cs = clientSecret;
|
|
63
|
+
if (language) script.dataset.lang = language;
|
|
62
64
|
script.src = `${base}?${clientKey}`;
|
|
63
65
|
document.head.appendChild(script);
|
|
64
66
|
return () => script.remove();
|
|
65
|
-
}, [clientKey, clientSecret, dataLayer, environment]);
|
|
67
|
+
}, [clientKey, clientSecret, dataLayer, environment, language]);
|
|
66
68
|
return /* @__PURE__ */ jsx(StromcomContext.Provider, { value: layer, children });
|
|
67
69
|
}
|
|
68
70
|
function useStromcom() {
|
|
@@ -100,7 +102,9 @@ function StromcomConf({
|
|
|
100
102
|
homeBeforeRender,
|
|
101
103
|
notificationElementBeforeRender,
|
|
102
104
|
notificationElementAfterRender,
|
|
103
|
-
|
|
105
|
+
language,
|
|
106
|
+
theme,
|
|
107
|
+
entityResolve
|
|
104
108
|
}) {
|
|
105
109
|
const sc = useStromcom();
|
|
106
110
|
useEffect3(() => {
|
|
@@ -126,7 +130,9 @@ function StromcomConf({
|
|
|
126
130
|
opts.notificationElementBeforeRender = notificationElementBeforeRender;
|
|
127
131
|
if (notificationElementAfterRender !== void 0)
|
|
128
132
|
opts.notificationElementAfterRender = notificationElementAfterRender;
|
|
133
|
+
if (language !== void 0) opts.language = language;
|
|
129
134
|
if (theme !== void 0) opts.theme = theme;
|
|
135
|
+
if (entityResolve !== void 0) opts.entityResolve = entityResolve;
|
|
130
136
|
sc.conf(opts);
|
|
131
137
|
}, [
|
|
132
138
|
sc,
|
|
@@ -142,7 +148,9 @@ function StromcomConf({
|
|
|
142
148
|
homeBeforeRender,
|
|
143
149
|
notificationElementBeforeRender,
|
|
144
150
|
notificationElementAfterRender,
|
|
145
|
-
|
|
151
|
+
language,
|
|
152
|
+
theme,
|
|
153
|
+
entityResolve
|
|
146
154
|
]);
|
|
147
155
|
return null;
|
|
148
156
|
}
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/StromcomProvider.jsx","../src/StromcomUser.jsx","../src/StromcomConf.jsx","../src/StromcomThread.jsx","../src/StromcomHome.jsx"],"sourcesContent":["import { createContext, useContext, useEffect } from 'react';\n\nexport const StromcomContext = createContext(null);\n\nconst LOADER_URLS = {\n production: 'https://cdn.stromcom.cz/loader.js',\n staging: 'https://cdn.staging.stromcom.cz/loader.js',\n};\n\n/**\n * Sets up the stromCom stub layer synchronously so that child components can\n * queue calls (initUser, thread, conf, home) before the async loader.js arrives.\n * Mirrors what the PHP snippet() method generates.\n */\nfunction setupLayer(dataLayer) {\n if (typeof window === 'undefined') {\n return null;\n }\n\n if (window[dataLayer]?.__sc_ready) {\n return window[dataLayer];\n }\n\n const dl = dataLayer + 'DL';\n window[dl] = window[dl] || {};\n window[dataLayer] = window[dataLayer] || {};\n const layer = window[dataLayer];\n\n const stub = (method, dlKey, isArray) => {\n dlKey = dlKey || method;\n if (isArray) {\n window[dl][dlKey] = window[dl][dlKey] || [];\n }\n\n layer[method] = (...args) => {\n if (isArray) {\n window[dl][dlKey].push(args);\n } else {\n window[dl][dlKey] = args;\n }\n };\n };\n\n stub('initUser', 'user');\n stub('thread', 'threads', true);\n stub('conf');\n stub('home', 'home', true);\n\n layer.__sc_ready = true;\n return layer;\n}\n\n/**\n * Wraps the app and loads the Stromcom widget SDK.\n *\n * @param {object} props\n * @param {string} props.clientKey - Client key from the Stromcom dashboard\n * @param {string} props.clientSecret - Bearer token from the Stromcom dashboard\n * @param {string} [props.dataLayer] - Global JS variable name (default: \"stromCom\")\n * @param {string} [props.environment] - \"production\" | \"staging\" | full custom loader URL\n * @param {React.ReactNode} props.children\n *\n * @example\n * <StromcomProvider clientKey=\"ck_xxx\" clientSecret=\"cs_xxx\">\n * <App />\n * </StromcomProvider>\n */\nexport function StromcomProvider({\n clientKey,\n clientSecret,\n dataLayer = 'stromCom',\n environment = 'production',\n children,\n}) {\n // Set up stubs synchronously so children can queue calls immediately on render.\n const layer = setupLayer(dataLayer);\n\n useEffect(() => {\n if (typeof window === 'undefined') return;\n\n // Avoid injecting the script twice (React StrictMode, HMR, etc.)\n if (document.querySelector(`script[data-ck=\"${clientKey}\"][data-type=\"stromcom\"]`)) return;\n\n const base = LOADER_URLS[environment] ?? environment;\n const dl = dataLayer + 'DL';\n\n const script = document.createElement('script');\n script.async = true;\n script.dataset.type = 'stromcom';\n script.dataset.l = dataLayer;\n script.dataset.dl = dl;\n script.dataset.ck = clientKey;\n script.dataset.cs = clientSecret;\n script.src = `${base}?${clientKey}`;\n document.head.appendChild(script);\n\n return () => script.remove();\n }, [clientKey, clientSecret, dataLayer, environment]);\n\n return <StromcomContext.Provider value={layer}>{children}</StromcomContext.Provider>;\n}\n\nexport function useStromcom() {\n return useContext(StromcomContext);\n}\n","import { useEffect } from 'react';\nimport { useStromcom } from './StromcomProvider.jsx';\n\n/**\n * Identifies the currently logged-in user.\n * Re-calls initUser whenever any prop changes.\n *\n * IMPORTANT: The `code` should already be hashed server-side (HMAC + base-62).\n * Never pass your raw internal user ID directly from the client.\n *\n * @param {object} props\n * @param {string} props.code - Hashed unique user identifier (max 100 chars, [a-zA-Z0-9-_])\n * @param {string} [props.name] - Display name\n * @param {string} [props.emailAddress]- Used for email notifications\n * @param {boolean} [props.readOnly] - When true, user can read but not send messages\n * @param {string} [props.avatarURL] - Full URL to avatar image\n *\n * @example\n * <StromcomUser\n * code={user.stromcomHash}\n * name={user.name}\n * emailAddress={user.email}\n * />\n */\nexport function StromcomUser({ code, name, emailAddress, readOnly, avatarURL }) {\n const sc = useStromcom();\n\n useEffect(() => {\n if (!sc) return;\n\n const opts = { code };\n if (name !== undefined) opts.name = name;\n if (emailAddress !== undefined) opts.emailAddress = emailAddress;\n if (readOnly !== undefined) opts.readOnly = readOnly;\n if (avatarURL !== undefined) opts.avatarURL = avatarURL;\n\n sc.initUser(opts);\n }, [sc, code, name, emailAddress, readOnly, avatarURL]);\n\n return null;\n}\n","import { useEffect } from 'react';\nimport { useStromcom } from './StromcomProvider.jsx';\n\n/**\n * Sends SDK configuration to the Stromcom widget.\n * Should be placed once inside <StromcomProvider>, before threads or the home component.\n * Re-sends conf whenever any option prop changes.\n *\n * Options that accept functions (notificationRenderer, onNotification, etc.) take\n * actual JS functions here — no need for the string-wrapping used in the PHP library.\n *\n * @param {object} [props.notificationRenderer] - Function(notification) for custom notification rendering\n * @param {object} [props.onNotification] - Function(count) called when unread count changes\n * @param {string} [props.pageCSSPath] - URL of CSS file injected into the widget iframe\n * @param {Function} [props.notificationElementTargetElement] - Function/Promise/Element returning the icon mount target\n * @param {boolean} [props.notificationElementShowAlways] - Show icon even with zero notifications\n * @param {number} [props.notificationElementPosition] - Icon position: 1=top-left 2=top-right 3=bottom-right 4=bottom-left\n * @param {object} [props.notificationElementStyles] - Inline styles object for the default notification button\n * @param {string} [props.notificationElementCSSPath] - CSS URL for the default notification renderer\n * @param {boolean} [props.notificationElementNoShadowRoot]- Disable shadow-root for notifications\n * @param {Function} [props.homeBeforeRender] - Callback before notification center opens\n * @param {Function} [props.notificationElementBeforeRender]- Callback before notification icon renders\n * @param {Function} [props.notificationElementAfterRender] - Callback after notification icon renders\n * @param {('stromcom-light'|'stromcom-dark'|null)} [props.theme] - Theme. null follows browser preference.\n *\n * @example\n * <StromcomConf\n * notificationElementPosition={4}\n * onNotification={(count) => setBadge(count)}\n * />\n */\nexport function StromcomConf({\n notificationRenderer,\n onNotification,\n pageCSSPath,\n notificationElementTargetElement,\n notificationElementShowAlways,\n notificationElementPosition,\n notificationElementStyles,\n notificationElementCSSPath,\n notificationElementNoShadowRoot,\n homeBeforeRender,\n notificationElementBeforeRender,\n notificationElementAfterRender,\n theme,\n}) {\n const sc = useStromcom();\n\n useEffect(() => {\n if (!sc) return;\n\n const opts = {};\n\n if (notificationRenderer !== undefined) opts.notificationRenderer = notificationRenderer;\n if (onNotification !== undefined) opts.onNotification = onNotification;\n if (pageCSSPath !== undefined) opts.pageCSSPath = pageCSSPath;\n if (notificationElementTargetElement !== undefined)\n opts.notificationElementTargetElement = notificationElementTargetElement;\n if (notificationElementShowAlways !== undefined)\n opts.notificationElementShowAlways = notificationElementShowAlways;\n if (notificationElementPosition !== undefined)\n opts.notificationElementPosition = notificationElementPosition;\n if (notificationElementStyles !== undefined)\n opts.notificationElementStyles = notificationElementStyles;\n if (notificationElementCSSPath !== undefined)\n opts.notificationElementCSSPath = notificationElementCSSPath;\n if (notificationElementNoShadowRoot !== undefined)\n opts.notificationElementNoShadowRoot = notificationElementNoShadowRoot;\n if (homeBeforeRender !== undefined) opts.homeBeforeRender = homeBeforeRender;\n if (notificationElementBeforeRender !== undefined)\n opts.notificationElementBeforeRender = notificationElementBeforeRender;\n if (notificationElementAfterRender !== undefined)\n opts.notificationElementAfterRender = notificationElementAfterRender;\n if (theme !== undefined) opts.theme = theme;\n\n sc.conf(opts);\n }, [\n sc,\n notificationRenderer,\n onNotification,\n pageCSSPath,\n notificationElementTargetElement,\n notificationElementShowAlways,\n notificationElementPosition,\n notificationElementStyles,\n notificationElementCSSPath,\n notificationElementNoShadowRoot,\n homeBeforeRender,\n notificationElementBeforeRender,\n notificationElementAfterRender,\n theme,\n ]);\n\n return null;\n}\n","import { useEffect, useRef } from 'react';\nimport { useStromcom } from './StromcomProvider.jsx';\n\n/**\n * Embeds a Stromcom conversation thread into the rendered div.\n * The thread is initialized once on mount.\n *\n * IMPORTANT: The `code` should already be hashed server-side (HMAC + base-62).\n *\n * @param {object} props\n * @param {string} props.code - Hashed unique thread identifier (max 100 chars, [a-zA-Z0-9-_])\n * @param {string} [props.name] - Display name shown in the thread header\n * @param {string} [props.url] - Canonical URL of the page (shown as link in header)\n * @param {boolean} [props.userHint] - Enable @mention suggestions (default: true)\n * @param {string} [props.className] - CSS class for the container div\n * @param {object} [props.style] - Inline styles for the container div\n *\n * @example\n * <StromcomThread\n * code={order.stromcomHash}\n * name={`Order #${order.id}`}\n * url={window.location.href}\n * style={{ height: '400px' }}\n * />\n */\nexport function StromcomThread({ code, name, url, userHint, className, style, ...rest }) {\n const sc = useStromcom();\n const containerRef = useRef(null);\n const initializedRef = useRef(false);\n\n useEffect(() => {\n if (!sc || !containerRef.current || initializedRef.current) return;\n\n const opts = { code };\n if (name !== undefined) opts.name = name;\n if (url !== undefined) opts.url = url;\n if (userHint !== undefined) opts.userHint = userHint;\n\n sc.thread(containerRef.current, opts);\n initializedRef.current = true;\n // eslint-disable-next-line react-hooks/exhaustive-deps -- intentionally omit option deps, thread cannot be re-initialized\n }, [sc]);\n\n return <div ref={containerRef} className={className} style={style} {...rest} />;\n}\n","import { useEffect, useRef } from 'react';\nimport { useStromcom } from './StromcomProvider.jsx';\n\n/**\n * Embeds the Stromcom notification center into the rendered div.\n * Initialized once on mount.\n *\n * @param {object} [props.className] - CSS class for the container div\n * @param {object} [props.style] - Inline styles for the container div\n *\n * @example\n * <StromcomHome style={{ position: 'fixed', bottom: 24, right: 24 }} />\n */\nexport function StromcomHome({ className, style, ...rest }) {\n const sc = useStromcom();\n const containerRef = useRef(null);\n const initializedRef = useRef(false);\n\n useEffect(() => {\n if (!sc || !containerRef.current || initializedRef.current) return;\n sc.home(containerRef.current);\n initializedRef.current = true;\n }, [sc]);\n\n return <div ref={containerRef} className={className} style={style} {...rest} />;\n}\n"],"mappings":"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","names":["useEffect","useEffect","useEffect","useEffect","useEffect","jsx","useEffect","useEffect","useRef","jsx","useRef","useEffect"]}
|
|
1
|
+
{"version":3,"sources":["../src/StromcomProvider.jsx","../src/StromcomUser.jsx","../src/StromcomConf.jsx","../src/StromcomThread.jsx","../src/StromcomHome.jsx"],"sourcesContent":["import { createContext, useContext, useEffect } from 'react';\n\nexport const StromcomContext = createContext(null);\n\nconst LOADER_URLS = {\n production: 'https://cdn.stromcom.cz/loader.js',\n staging: 'https://cdn.staging.stromcom.cz/loader.js',\n};\n\n/**\n * Sets up the stromCom stub layer synchronously so that child components can\n * queue calls (initUser, thread, conf, home) before the async loader.js arrives.\n * Mirrors what the PHP snippet() method generates.\n */\nfunction setupLayer(dataLayer) {\n if (typeof window === 'undefined') {\n return null;\n }\n\n if (window[dataLayer]?.__sc_ready) {\n return window[dataLayer];\n }\n\n const dl = dataLayer + 'DL';\n window[dl] = window[dl] || {};\n window[dataLayer] = window[dataLayer] || {};\n const layer = window[dataLayer];\n\n const stub = (method, dlKey, isArray) => {\n dlKey = dlKey || method;\n if (isArray) {\n window[dl][dlKey] = window[dl][dlKey] || [];\n }\n\n layer[method] = (...args) => {\n if (isArray) {\n window[dl][dlKey].push(args);\n } else {\n window[dl][dlKey] = args;\n }\n };\n };\n\n stub('initUser', 'user');\n stub('thread', 'threads', true);\n stub('conf');\n stub('home', 'home', true);\n\n layer.__sc_ready = true;\n return layer;\n}\n\n/**\n * Wraps the app and loads the Stromcom widget SDK.\n *\n * @param {object} props\n * @param {string} props.clientKey - Client key from the Stromcom dashboard\n * @param {string} props.clientSecret - Bearer token from the Stromcom dashboard\n * @param {string} [props.dataLayer] - Global JS variable name (default: \"stromCom\")\n * @param {string} [props.environment] - \"production\" | \"staging\" | full custom loader URL\n * @param {string} [props.language] - Initial UI language (e.g. \"cs\", \"en\", \"sk\"). Omit to auto-detect from the\n * browser. Use StromcomConf's `language` prop to change it at runtime.\n * @param {React.ReactNode} props.children\n *\n * @example\n * <StromcomProvider clientKey=\"ck_xxx\" clientSecret=\"cs_xxx\">\n * <App />\n * </StromcomProvider>\n */\nexport function StromcomProvider({\n clientKey,\n clientSecret,\n dataLayer = 'stromCom',\n environment = 'production',\n language,\n children,\n}) {\n // Set up stubs synchronously so children can queue calls immediately on render.\n const layer = setupLayer(dataLayer);\n\n useEffect(() => {\n if (typeof window === 'undefined') return;\n\n // Avoid injecting the script twice (React StrictMode, HMR, etc.)\n if (document.querySelector(`script[data-ck=\"${clientKey}\"][data-type=\"stromcom\"]`)) return;\n\n const base = LOADER_URLS[environment] ?? environment;\n const dl = dataLayer + 'DL';\n\n const script = document.createElement('script');\n script.async = true;\n script.dataset.type = 'stromcom';\n script.dataset.l = dataLayer;\n script.dataset.dl = dl;\n script.dataset.ck = clientKey;\n script.dataset.cs = clientSecret;\n if (language) script.dataset.lang = language;\n script.src = `${base}?${clientKey}`;\n document.head.appendChild(script);\n\n return () => script.remove();\n }, [clientKey, clientSecret, dataLayer, environment, language]);\n\n return <StromcomContext.Provider value={layer}>{children}</StromcomContext.Provider>;\n}\n\nexport function useStromcom() {\n return useContext(StromcomContext);\n}\n","import { useEffect } from 'react';\nimport { useStromcom } from './StromcomProvider.jsx';\n\n/**\n * Identifies the currently logged-in user.\n * Re-calls initUser whenever any prop changes.\n *\n * IMPORTANT: The `code` should already be hashed server-side (HMAC + base-62).\n * Never pass your raw internal user ID directly from the client.\n *\n * @param {object} props\n * @param {string} props.code - Hashed unique user identifier (max 100 chars, [a-zA-Z0-9-_])\n * @param {string} [props.name] - Display name\n * @param {string} [props.emailAddress]- Used for email notifications\n * @param {boolean} [props.readOnly] - When true, user can read but not send messages\n * @param {string} [props.avatarURL] - Full URL to avatar image\n *\n * @example\n * <StromcomUser\n * code={user.stromcomHash}\n * name={user.name}\n * emailAddress={user.email}\n * />\n */\nexport function StromcomUser({ code, name, emailAddress, readOnly, avatarURL }) {\n const sc = useStromcom();\n\n useEffect(() => {\n if (!sc) return;\n\n const opts = { code };\n if (name !== undefined) opts.name = name;\n if (emailAddress !== undefined) opts.emailAddress = emailAddress;\n if (readOnly !== undefined) opts.readOnly = readOnly;\n if (avatarURL !== undefined) opts.avatarURL = avatarURL;\n\n sc.initUser(opts);\n }, [sc, code, name, emailAddress, readOnly, avatarURL]);\n\n return null;\n}\n","import { useEffect } from 'react';\nimport { useStromcom } from './StromcomProvider.jsx';\n\n/**\n * Sends SDK configuration to the Stromcom widget.\n * Should be placed once inside <StromcomProvider>, before threads or the home component.\n * Re-sends conf whenever any option prop changes.\n *\n * Options that accept functions (notificationRenderer, onNotification, etc.) take\n * actual JS functions here — no need for the string-wrapping used in the PHP library.\n *\n * @param {object} [props.notificationRenderer] - Function(notification) for custom notification rendering\n * @param {object} [props.onNotification] - Function(count) called when unread count changes\n * @param {string} [props.pageCSSPath] - URL of CSS file injected into the widget iframe\n * @param {Function} [props.notificationElementTargetElement] - Function/Promise/Element returning the icon mount target\n * @param {boolean} [props.notificationElementShowAlways] - Show icon even with zero notifications\n * @param {number} [props.notificationElementPosition] - Icon position: 1=top-left 2=top-right 3=bottom-right 4=bottom-left\n * @param {object} [props.notificationElementStyles] - Inline styles object for the default notification button\n * @param {string} [props.notificationElementCSSPath] - CSS URL for the default notification renderer\n * @param {boolean} [props.notificationElementNoShadowRoot]- Disable shadow-root for notifications\n * @param {Function} [props.homeBeforeRender] - Callback before notification center opens\n * @param {Function} [props.notificationElementBeforeRender]- Callback before notification icon renders\n * @param {Function} [props.notificationElementAfterRender] - Callback after notification icon renders\n * @param {(string|null)} [props.language] - UI language. Any code is accepted; one without a translation falls\n * back to the browser language, then English. null follows the browser. Overrides the `language`\n * prop on StromcomProvider, which is only the initial value; this one\n * can be changed at runtime.\n * @param {('stromcom-light'|'stromcom-dark'|null)} [props.theme] - Theme. null follows browser preference.\n * @param {Function} [props.entityResolve] - async ({type, id}) => detail; resolves business-entity detail for the message editor's chip hover-card\n *\n * @example\n * <StromcomConf\n * notificationElementPosition={4}\n * onNotification={(count) => setBadge(count)}\n * />\n */\nexport function StromcomConf({\n notificationRenderer,\n onNotification,\n pageCSSPath,\n notificationElementTargetElement,\n notificationElementShowAlways,\n notificationElementPosition,\n notificationElementStyles,\n notificationElementCSSPath,\n notificationElementNoShadowRoot,\n homeBeforeRender,\n notificationElementBeforeRender,\n notificationElementAfterRender,\n language,\n theme,\n entityResolve,\n}) {\n const sc = useStromcom();\n\n useEffect(() => {\n if (!sc) return;\n\n const opts = {};\n\n if (notificationRenderer !== undefined) opts.notificationRenderer = notificationRenderer;\n if (onNotification !== undefined) opts.onNotification = onNotification;\n if (pageCSSPath !== undefined) opts.pageCSSPath = pageCSSPath;\n if (notificationElementTargetElement !== undefined)\n opts.notificationElementTargetElement = notificationElementTargetElement;\n if (notificationElementShowAlways !== undefined)\n opts.notificationElementShowAlways = notificationElementShowAlways;\n if (notificationElementPosition !== undefined)\n opts.notificationElementPosition = notificationElementPosition;\n if (notificationElementStyles !== undefined)\n opts.notificationElementStyles = notificationElementStyles;\n if (notificationElementCSSPath !== undefined)\n opts.notificationElementCSSPath = notificationElementCSSPath;\n if (notificationElementNoShadowRoot !== undefined)\n opts.notificationElementNoShadowRoot = notificationElementNoShadowRoot;\n if (homeBeforeRender !== undefined) opts.homeBeforeRender = homeBeforeRender;\n if (notificationElementBeforeRender !== undefined)\n opts.notificationElementBeforeRender = notificationElementBeforeRender;\n if (notificationElementAfterRender !== undefined)\n opts.notificationElementAfterRender = notificationElementAfterRender;\n if (language !== undefined) opts.language = language;\n if (theme !== undefined) opts.theme = theme;\n if (entityResolve !== undefined) opts.entityResolve = entityResolve;\n\n sc.conf(opts);\n }, [\n sc,\n notificationRenderer,\n onNotification,\n pageCSSPath,\n notificationElementTargetElement,\n notificationElementShowAlways,\n notificationElementPosition,\n notificationElementStyles,\n notificationElementCSSPath,\n notificationElementNoShadowRoot,\n homeBeforeRender,\n notificationElementBeforeRender,\n notificationElementAfterRender,\n language,\n theme,\n entityResolve,\n ]);\n\n return null;\n}\n","import { useEffect, useRef } from 'react';\nimport { useStromcom } from './StromcomProvider.jsx';\n\n/**\n * Embeds a Stromcom conversation thread into the rendered div.\n * The thread is initialized once on mount.\n *\n * IMPORTANT: The `code` should already be hashed server-side (HMAC + base-62).\n *\n * @param {object} props\n * @param {string} props.code - Hashed unique thread identifier (max 100 chars, [a-zA-Z0-9-_])\n * @param {string} [props.name] - Display name shown in the thread header\n * @param {string} [props.url] - Canonical URL of the page (shown as link in header)\n * @param {boolean} [props.userHint] - Enable @mention suggestions (default: true)\n * @param {string} [props.className] - CSS class for the container div\n * @param {object} [props.style] - Inline styles for the container div\n *\n * @example\n * <StromcomThread\n * code={order.stromcomHash}\n * name={`Order #${order.id}`}\n * url={window.location.href}\n * style={{ height: '400px' }}\n * />\n */\nexport function StromcomThread({ code, name, url, userHint, className, style, ...rest }) {\n const sc = useStromcom();\n const containerRef = useRef(null);\n const initializedRef = useRef(false);\n\n useEffect(() => {\n if (!sc || !containerRef.current || initializedRef.current) return;\n\n const opts = { code };\n if (name !== undefined) opts.name = name;\n if (url !== undefined) opts.url = url;\n if (userHint !== undefined) opts.userHint = userHint;\n\n sc.thread(containerRef.current, opts);\n initializedRef.current = true;\n // eslint-disable-next-line react-hooks/exhaustive-deps -- intentionally omit option deps, thread cannot be re-initialized\n }, [sc]);\n\n return <div ref={containerRef} className={className} style={style} {...rest} />;\n}\n","import { useEffect, useRef } from 'react';\nimport { useStromcom } from './StromcomProvider.jsx';\n\n/**\n * Embeds the Stromcom notification center into the rendered div.\n * Initialized once on mount.\n *\n * @param {object} [props.className] - CSS class for the container div\n * @param {object} [props.style] - Inline styles for the container div\n *\n * @example\n * <StromcomHome style={{ position: 'fixed', bottom: 24, right: 24 }} />\n */\nexport function StromcomHome({ className, style, ...rest }) {\n const sc = useStromcom();\n const containerRef = useRef(null);\n const initializedRef = useRef(false);\n\n useEffect(() => {\n if (!sc || !containerRef.current || initializedRef.current) return;\n sc.home(containerRef.current);\n initializedRef.current = true;\n }, [sc]);\n\n return <div ref={containerRef} className={className} style={style} {...rest} />;\n}\n"],"mappings":"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","names":["useEffect","useEffect","useEffect","useEffect","useEffect","jsx","useEffect","useEffect","useRef","jsx","useRef","useEffect"]}
|
package/package.json
CHANGED
package/src/StromcomConf.jsx
CHANGED
|
@@ -21,7 +21,12 @@ import { useStromcom } from './StromcomProvider.jsx';
|
|
|
21
21
|
* @param {Function} [props.homeBeforeRender] - Callback before notification center opens
|
|
22
22
|
* @param {Function} [props.notificationElementBeforeRender]- Callback before notification icon renders
|
|
23
23
|
* @param {Function} [props.notificationElementAfterRender] - Callback after notification icon renders
|
|
24
|
+
* @param {(string|null)} [props.language] - UI language. Any code is accepted; one without a translation falls
|
|
25
|
+
* back to the browser language, then English. null follows the browser. Overrides the `language`
|
|
26
|
+
* prop on StromcomProvider, which is only the initial value; this one
|
|
27
|
+
* can be changed at runtime.
|
|
24
28
|
* @param {('stromcom-light'|'stromcom-dark'|null)} [props.theme] - Theme. null follows browser preference.
|
|
29
|
+
* @param {Function} [props.entityResolve] - async ({type, id}) => detail; resolves business-entity detail for the message editor's chip hover-card
|
|
25
30
|
*
|
|
26
31
|
* @example
|
|
27
32
|
* <StromcomConf
|
|
@@ -42,7 +47,9 @@ export function StromcomConf({
|
|
|
42
47
|
homeBeforeRender,
|
|
43
48
|
notificationElementBeforeRender,
|
|
44
49
|
notificationElementAfterRender,
|
|
50
|
+
language,
|
|
45
51
|
theme,
|
|
52
|
+
entityResolve,
|
|
46
53
|
}) {
|
|
47
54
|
const sc = useStromcom();
|
|
48
55
|
|
|
@@ -71,7 +78,9 @@ export function StromcomConf({
|
|
|
71
78
|
opts.notificationElementBeforeRender = notificationElementBeforeRender;
|
|
72
79
|
if (notificationElementAfterRender !== undefined)
|
|
73
80
|
opts.notificationElementAfterRender = notificationElementAfterRender;
|
|
81
|
+
if (language !== undefined) opts.language = language;
|
|
74
82
|
if (theme !== undefined) opts.theme = theme;
|
|
83
|
+
if (entityResolve !== undefined) opts.entityResolve = entityResolve;
|
|
75
84
|
|
|
76
85
|
sc.conf(opts);
|
|
77
86
|
}, [
|
|
@@ -88,7 +97,9 @@ export function StromcomConf({
|
|
|
88
97
|
homeBeforeRender,
|
|
89
98
|
notificationElementBeforeRender,
|
|
90
99
|
notificationElementAfterRender,
|
|
100
|
+
language,
|
|
91
101
|
theme,
|
|
102
|
+
entityResolve,
|
|
92
103
|
]);
|
|
93
104
|
|
|
94
105
|
return null;
|
package/src/StromcomProvider.jsx
CHANGED
|
@@ -58,6 +58,8 @@ function setupLayer(dataLayer) {
|
|
|
58
58
|
* @param {string} props.clientSecret - Bearer token from the Stromcom dashboard
|
|
59
59
|
* @param {string} [props.dataLayer] - Global JS variable name (default: "stromCom")
|
|
60
60
|
* @param {string} [props.environment] - "production" | "staging" | full custom loader URL
|
|
61
|
+
* @param {string} [props.language] - Initial UI language (e.g. "cs", "en", "sk"). Omit to auto-detect from the
|
|
62
|
+
* browser. Use StromcomConf's `language` prop to change it at runtime.
|
|
61
63
|
* @param {React.ReactNode} props.children
|
|
62
64
|
*
|
|
63
65
|
* @example
|
|
@@ -70,6 +72,7 @@ export function StromcomProvider({
|
|
|
70
72
|
clientSecret,
|
|
71
73
|
dataLayer = 'stromCom',
|
|
72
74
|
environment = 'production',
|
|
75
|
+
language,
|
|
73
76
|
children,
|
|
74
77
|
}) {
|
|
75
78
|
// Set up stubs synchronously so children can queue calls immediately on render.
|
|
@@ -91,11 +94,12 @@ export function StromcomProvider({
|
|
|
91
94
|
script.dataset.dl = dl;
|
|
92
95
|
script.dataset.ck = clientKey;
|
|
93
96
|
script.dataset.cs = clientSecret;
|
|
97
|
+
if (language) script.dataset.lang = language;
|
|
94
98
|
script.src = `${base}?${clientKey}`;
|
|
95
99
|
document.head.appendChild(script);
|
|
96
100
|
|
|
97
101
|
return () => script.remove();
|
|
98
|
-
}, [clientKey, clientSecret, dataLayer, environment]);
|
|
102
|
+
}, [clientKey, clientSecret, dataLayer, environment, language]);
|
|
99
103
|
|
|
100
104
|
return <StromcomContext.Provider value={layer}>{children}</StromcomContext.Provider>;
|
|
101
105
|
}
|
|
@@ -30,6 +30,42 @@ describe('StromcomConf', () => {
|
|
|
30
30
|
expect(layer.conf).toHaveBeenCalledWith({ onNotification });
|
|
31
31
|
});
|
|
32
32
|
|
|
33
|
+
it('forwards entityResolve as-is (no string-wrapping)', () => {
|
|
34
|
+
const layer = { conf: vi.fn() };
|
|
35
|
+
const entityResolve = vi.fn();
|
|
36
|
+
renderWithLayer(layer, { entityResolve });
|
|
37
|
+
|
|
38
|
+
expect(layer.conf).toHaveBeenCalledWith({ entityResolve });
|
|
39
|
+
});
|
|
40
|
+
|
|
41
|
+
it('sends the language option', () => {
|
|
42
|
+
const layer = { conf: vi.fn() };
|
|
43
|
+
renderWithLayer(layer, { language: 'cs' });
|
|
44
|
+
|
|
45
|
+
expect(layer.conf).toHaveBeenCalledWith({ language: 'cs' });
|
|
46
|
+
});
|
|
47
|
+
|
|
48
|
+
it('sends language null to follow the browser', () => {
|
|
49
|
+
const layer = { conf: vi.fn() };
|
|
50
|
+
renderWithLayer(layer, { language: null });
|
|
51
|
+
|
|
52
|
+
expect(layer.conf).toHaveBeenCalledWith({ language: null });
|
|
53
|
+
});
|
|
54
|
+
|
|
55
|
+
it('re-sends conf when the language changes', () => {
|
|
56
|
+
const layer = { conf: vi.fn() };
|
|
57
|
+
const { rerender } = renderWithLayer(layer, { language: 'cs' });
|
|
58
|
+
|
|
59
|
+
rerender(
|
|
60
|
+
<StromcomContext.Provider value={layer}>
|
|
61
|
+
<StromcomConf language="sk" />
|
|
62
|
+
</StromcomContext.Provider>,
|
|
63
|
+
);
|
|
64
|
+
|
|
65
|
+
expect(layer.conf).toHaveBeenCalledTimes(2);
|
|
66
|
+
expect(layer.conf).toHaveBeenLastCalledWith({ language: 'sk' });
|
|
67
|
+
});
|
|
68
|
+
|
|
33
69
|
it('re-sends conf when an option changes', () => {
|
|
34
70
|
const layer = { conf: vi.fn() };
|
|
35
71
|
const { rerender } = renderWithLayer(layer, { theme: 'stromcom-light' });
|
|
@@ -92,6 +92,26 @@ describe('StromcomProvider', () => {
|
|
|
92
92
|
expect(scriptFor('ck_5')).toBeNull();
|
|
93
93
|
});
|
|
94
94
|
|
|
95
|
+
it('sets data-lang when language is provided', () => {
|
|
96
|
+
render(
|
|
97
|
+
<StromcomProvider clientKey="ck_lang" clientSecret="cs_lang" language="cs">
|
|
98
|
+
<div />
|
|
99
|
+
</StromcomProvider>,
|
|
100
|
+
);
|
|
101
|
+
|
|
102
|
+
expect(scriptFor('ck_lang').dataset.lang).toBe('cs');
|
|
103
|
+
});
|
|
104
|
+
|
|
105
|
+
it('omits data-lang when language is not provided', () => {
|
|
106
|
+
render(
|
|
107
|
+
<StromcomProvider clientKey="ck_nolang" clientSecret="cs_nolang">
|
|
108
|
+
<div />
|
|
109
|
+
</StromcomProvider>,
|
|
110
|
+
);
|
|
111
|
+
|
|
112
|
+
expect(scriptFor('ck_nolang').dataset.lang).toBeUndefined();
|
|
113
|
+
});
|
|
114
|
+
|
|
95
115
|
it('respects a custom dataLayer name', () => {
|
|
96
116
|
render(
|
|
97
117
|
<StromcomProvider clientKey="ck_6" clientSecret="cs_6" dataLayer="customLayer">
|
package/src/index.d.ts
CHANGED
|
@@ -19,6 +19,12 @@ export interface StromcomProviderProps {
|
|
|
19
19
|
dataLayer?: string;
|
|
20
20
|
/** `"production"`, `"staging"`, or a full custom loader URL. Default `"production"`. */
|
|
21
21
|
environment?: StromcomEnvironment;
|
|
22
|
+
/**
|
|
23
|
+
* Initial UI language (e.g. `"cs"`, `"en"`, `"sk"`). Any code is accepted; one without a
|
|
24
|
+
* translation falls back to the browser language, then English. Omit to auto-detect from the browser.
|
|
25
|
+
* Use `StromcomConf`'s `language` prop to change it at runtime.
|
|
26
|
+
*/
|
|
27
|
+
language?: string;
|
|
22
28
|
children?: ReactNode;
|
|
23
29
|
}
|
|
24
30
|
|
|
@@ -78,8 +84,16 @@ export interface StromcomConfOptions {
|
|
|
78
84
|
homeBeforeRender?: () => void | Promise<void>;
|
|
79
85
|
notificationElementBeforeRender?: () => void | Promise<void>;
|
|
80
86
|
notificationElementAfterRender?: () => void;
|
|
87
|
+
/**
|
|
88
|
+
* UI language, or `null` to follow the browser. Any language code is accepted;
|
|
89
|
+
* one the widget has no translation for falls back to the browser language, then English.
|
|
90
|
+
* Overrides `StromcomProviderProps.language`, which is only the initial value.
|
|
91
|
+
*/
|
|
92
|
+
language?: string | null;
|
|
81
93
|
/** Theme: `"stromcom-light"`, `"stromcom-dark"`, or `null` to follow browser preference. */
|
|
82
94
|
theme?: 'stromcom-light' | 'stromcom-dark' | null;
|
|
95
|
+
/** Resolves business-entity detail (order, ticket…) for the message editor's chip hover-card. */
|
|
96
|
+
entityResolve?: (entity: { type: string; id: string }) => unknown | Promise<unknown>;
|
|
83
97
|
}
|
|
84
98
|
|
|
85
99
|
export function StromcomConf(props: StromcomConfOptions): null;
|