betagouv
/
mon-entreprise
mirror of https://github.com/betagouv/mon-entreprise
1
0
Fork 0
Code Releases Activity

✨ Ajout d'un bouton copier sur intégrer un simulateur 

Co-authored-by: Félix Legrelle <legrelle.f@gmail.com>
pull/2343/head
Lucas Stoebner 2022-10-13 23:02:58 +02:00 committed by Johan Girod
parent 16cd1188e5
commit 6f7da04321
3 changed files with 63 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
site/source/locales/ui-en.yaml
View File

@ -1213,6 +1213,7 @@ pages:
code:
description: "Here is the code to copy and paste on your site:"
titre: Integration Code
copy-code: Copy the code
components:
CasParticuliers: '<0>Learn more about...</0><1><0>How to make a simulation in
the past?</0><1>Since the end of 2021, the calculation rules of the

1
site/source/locales/ui-fr.yaml
View File

@ -974,6 +974,7 @@ pages:
code:
description: "Voici le code à copier-coller sur votre site&nbsp;:"
titre: Code d'intégration
copy-code: Copier le code
components:
CasParticuliers: "<0>En savoir plus sur...</0><1><0>Comment faire une simulation
dans le passé ?</0><1>Depuis fin 2021, les règles de calculs des

100
site/source/pages/integration/Iframe.tsx
View File

@ -18,6 +18,7 @@ import './iframe.css'
import cciLogo from './_images/cci.png'
import minTraLogo from './_images/min-tra.jpg'
import poleEmploiLogo from './_images/pole-emploi.png'
import { Button } from '@/design-system/buttons'
const checkIframe = (obj: SimulatorData[keyof SimulatorData]) =>
'iframePath' in obj && obj.iframePath && !('private' in obj && obj.private)
@ -317,32 +318,27 @@ function IntegrationCode({
module = 'simulateur-embauche',
color,
}: IntegrationCodeProps) {
const { t } = useTranslation()
const codeRef = useRef<HTMLDivElement>(null)
const [secondClick, setSecondClick] = useState(false)
const selectAllCode = () => {
if (codeRef.current && !secondClick) {
const range = document.createRange()
range.selectNode(codeRef.current)
window.getSelection()?.removeAllRanges()
window.getSelection()?.addRange(range)
setSecondClick(true)
}
if (secondClick) {
setSecondClick(false)
}
const [copied, setCopied] = useState(false)
const copyCodeToClipboard = (): void => {
navigator.clipboard
.writeText(codeRef.current?.innerText || '')
.then(() => setCopied(true))
.catch(() => setCopied(false))
}
return (
<code
ref={codeRef}
onClick={selectAllCode}
<div
css={`
display: block;
position: relative;
font-size: 80%;
padding: 1em;
margin: auto auto 1em;
background: #f8f8f8;
margin: auto;
margin-bottom: 1em;
overflow: auto;
line-height: 1.6em;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05),
@ -354,27 +350,53 @@ function IntegrationCode({
}
`}
>
<span>{'<'}</span>
<em>script</em>
<br />
<em>data-module</em>="
<span>{module}</span>"
{color ? (
<>
<br />
<em>data-couleur</em>="
<span id="scriptColor">{color}</span>"
</>
) : (
''
)}
<br />
<em>src</em>
="https://mon-entreprise.urssaf.fr/simulateur-iframe-integration.js"{'>'}
<span>{'<'}</span>
<span>/</span>
<em>script</em>
<span>{'>'}</span>
</code>
<code ref={codeRef}>
<span>{'<'}</span>
<em>script</em>
<br />
<em>data-module</em>="
<span>{module}</span>"
{color ? (
<>
<br />
<em>data-couleur</em>="
<span id="scriptColor">{color}</span>"
</>
) : (
''
)}
<br />
<em>src</em>
="https://mon-entreprise.urssaf.fr/simulateur-iframe-integration.js"
{'>'}
<span>{'<'}</span>
<span>/</span>
<em>script</em>
<span>{'>'}</span>
</code>
<div
css={`
display: block;
right: 0;
top: 0;
position: absolute;
margin: 8px;
`}
>
<Button
size="XXS"
type="button"
title={
copied
? t('copied', 'Copié')
: t('pages.développeur.code.copy-code', 'Copier le code')
}
color={copied ? 'secondary' : 'primary'}
onPress={copyCodeToClipboard}
>
<Emoji emoji={copied ? '✔️' : '📑'} />
</Button>
</div>
</div>
)
}