openreplay/frontend/app/components/shared/CodeSnippet/CodeSnippet.tsx
Andrey Babushkin fd5c0c9747
Add lokalisation (#3092)
* applied eslint

* add locales and lint the project

* removed error boundary

* updated locales

* fix min files

* fix locales
2025-03-06 17:43:15 +01:00

70 lines
2.1 KiB
TypeScript

import React from 'react';
import { CopyButton, CodeBlock } from 'UI';
const inputModeOptions = [
{ label: 'Record all inputs', value: 'plain' },
{ label: 'Obscure all inputs', value: 'hidden' },
{ label: 'Ignore all inputs', value: 'obscured' },
];
const inputModeOptionsMap: any = {};
inputModeOptions.forEach(
(o: any, i: any) => (inputModeOptionsMap[o.value] = i),
);
interface Props {
isAssistEnabled: boolean;
host: string;
projectKey: string;
ingestPoint: string;
defaultInputMode: any;
obscureTextNumbers: boolean;
obscureTextEmails: boolean;
}
function CodeSnippet(props: Props) {
const {
host,
projectKey,
ingestPoint,
defaultInputMode,
obscureTextNumbers,
obscureTextEmails,
isAssistEnabled,
} = props;
const codeSnippet = `<!-- OpenReplay Tracking Code for ${host} -->
<script>
var initOpts = {
projectKey: "${projectKey}",
ingestPoint: ${ingestPoint},
defaultInputMode: ${inputModeOptionsMap[defaultInputMode]},
obscureTextNumbers: ${obscureTextNumbers},
obscureTextEmails: ${obscureTextEmails},
};
var startOpts = { userID: "" };
(function(A,s,a,y,e,r){
r=window.OpenReplay=[e,r,y,[s-1, e]];
s=document.createElement('script');s.src=A;s.async=!a;
document.getElementsByTagName('head')[0].appendChild(s);
r.start=function(v){r.push([0])};
r.stop=function(v){r.push([1])};
r.setUserID=function(id){r.push([2,id])};
r.setUserAnonymousID=function(id){r.push([3,id])};
r.setMetadata=function(k,v){r.push([4,k,v])};
r.event=function(k,p,i){r.push([5,k,p,i])};
r.issue=function(k,p){r.push([6,k,p])};
r.isActive=function(){return false};
r.getSessionToken=function(){};
})("${window.env.TRACKER_HOST || '//static.openreplay.com'}/${window.env.TRACKER_VERSION}/openreplay${isAssistEnabled ? '-assist.js' : '.js'}",1,0,initOpts,startOpts);
</script>`;
return (
<div className="relative">
<div className="absolute top-0 right-0 mt-2 mr-2">
<CopyButton content={codeSnippet} className="uppercase" />
</div>
<CodeBlock code={codeSnippet} language="js" />
</div>
);
}
export default CodeSnippet;