Skip to content

Commit

Permalink
[issues-2703] Update swag store link and add a disclaimer (#2709)
Browse files Browse the repository at this point in the history
* [issues-2703] Update swag store link and add a disclaimer

* Update / Create tests

* Coverage

---------

Co-authored-by: Martijn Verburg <[email protected]>
  • Loading branch information
xavierfacq and karianna authored Mar 12, 2024
1 parent 477a489 commit 51b978e
Show file tree
Hide file tree
Showing 6 changed files with 282 additions and 4 deletions.
8 changes: 8 additions & 0 deletions locales/fr/leaving-site-disclaimer.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
{
"leaving.site.disclaimer.modal.title": "Avis de non-responsabilité - Vous allez quitter notre site Web",
"leaving.site.disclaimer.modal.continue": "Continuer",
"leaving.site.disclaimer.modal.close": "Fermer",

"swag.store.disclaimer": "En cliquant sur le bouton Continuer, vous quitterez notre site Web. Veuillez noter que de nouvelles conditions d'utilisation s'appliqueront à la boutique Eclipse Foundation, alimentée par Fourthwall : https://eclipse-foundation.store/."
}

Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,61 @@ exports[`Footer component > renders correctly 1`] = `
<div
class="random-contributor"
/>
<div
aria-hidden="true"
aria-labelledby="leavingSiteDisclaimerLabel"
class="modal fade"
id="leavingSiteDisclaimerModal"
style="z-index: 10000;"
tabindex="-1"
>
<div
class="modal-dialog modal-lg"
>
<div
class="modal-content"
>
<div
class="modal-header"
>
<h5
class="modal-title"
id="leavingSiteDisclaimerLabel"
>
Text
</h5>
<button
aria-label="Close"
class="btn-close"
data-bs-dismiss="modal"
type="button"
/>
</div>
<div
class="modal-body text-start"
>
<p />
</div>
<div
class="modal-footer"
>
<button
class="btn btn-primary"
type="button"
>
Text
</button>
<button
class="btn btn-secondary"
data-bs-dismiss="modal"
type="button"
>
Text
</button>
</div>
</div>
</div>
</div>
</section>
<div
class="bg-grey"
Expand Down Expand Up @@ -250,7 +305,11 @@ exports[`Footer component > renders correctly 1`] = `
>
<a
class="nav-link p-0 text-muted"
href="https://store.adoptium.net/"
data-bs-location="https://eclipse-foundation.store/collections/eclipse-adoptium"
data-bs-message="swag.store.disclaimer"
data-bs-target="#leavingSiteDisclaimerModal"
data-bs-toggle="modal"
href="https://eclipse-foundation.store/collections/eclipse-adoptium"
>
Text
</a>
Expand Down
15 changes: 12 additions & 3 deletions src/components/Footer/index.tsx
Original file line number Diff line number Diff line change
@@ -1,17 +1,21 @@
import { Link } from 'gatsby-plugin-react-i18next';
import React from 'react';
import { FaYoutube, FaGithub, FaSlack, FaLinkedin } from 'react-icons/fa';
import { FaXTwitter } from 'react-icons/fa6';
import RandomContributor from '../RandomContributor';
import LanguageSelector from '../LanguageSelector';
import { Trans } from 'gatsby-plugin-react-i18next';
import { Link, Trans, useTranslation } from 'gatsby-plugin-react-i18next';
import LeavingSiteDisclaimerModal from '../LeavingSiteDisclaimerModal';
import './Footer.scss';

const Footer = (): JSX.Element => {

const {t} = useTranslation();

return (
<>
<section className="bottom-info">
<RandomContributor />
<LeavingSiteDisclaimerModal />
</section>
<div className="bg-grey">
<div className="container mt-5">
Expand Down Expand Up @@ -51,7 +55,12 @@ const Footer = (): JSX.Element => {
<li className="nav-item mb-2"><a href="https://www.eclipse.org/mail/" className="nav-link p-0 text-muted"><Trans i18nKey='footer.mailing.lists' defaults='Mailing Lists'/></a></li>
<li className="nav-item mb-2"><a href="https://www.eclipse.org/forums/" className="nav-link p-0 text-muted"><Trans i18nKey='footer.forums' defaults='Forums'/></a></li>
<li className="nav-item mb-2"><a href="https://marketplace.eclipse.org/" className="nav-link p-0 text-muted"><Trans i18nKey='footer.marketplace' defaults='Marketplace'/></a></li>
<li className="nav-item mb-2"><a href="https://store.adoptium.net/" className="nav-link p-0 text-muted"><Trans i18nKey='footer.swag.store' defaults='Swag Store'/></a></li>
<li className="nav-item mb-2"><a href="https://eclipse-foundation.store/collections/eclipse-adoptium" className="nav-link p-0 text-muted"
data-bs-toggle="modal"
data-bs-target="#leavingSiteDisclaimerModal"
data-bs-message={t('swag.store.disclaimer', 'By clicking the continue button, you will leave our website. Please be aware that new terms of use will apply to the Eclipse Foundation store, powered by Fourthwall: https://eclipse-foundation.store/.')}
data-bs-location="https://eclipse-foundation.store/collections/eclipse-adoptium"
><Trans i18nKey='footer.swag.store' defaults='Swag Store'/></a></li>
</ul>
</div>

Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
import React from 'react';
import userEvent from '@testing-library/user-event';
import { render, screen } from '@testing-library/react';
import { describe, expect, it, vi } from 'vitest'
import LeavingSiteDisclaimerModal from '..';

describe('LeavingSiteDisclaimerModal component', () => {
it('LeavingSiteDisclaimerModal renders correctly', () => {
const { container } = render(
<LeavingSiteDisclaimerModal />
);
expect(container).toMatchSnapshot();
});

it('LeavingSiteDisclaimerModal continue correctly', async () => {
const { container } = render(
<LeavingSiteDisclaimerModal />
);

const cancelButton = container.querySelector('button[class="btn btn-primary"]');

await userEvent.click(cancelButton).then(async() => {
expect(container).toMatchSnapshot();
});
});
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,121 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html

exports[`LeavingSiteDisclaimerModal component > LeavingSiteDisclaimerModal continue correctly 1`] = `
<div>
<div
aria-hidden="true"
aria-labelledby="leavingSiteDisclaimerLabel"
class="modal fade"
id="leavingSiteDisclaimerModal"
style="z-index: 10000;"
tabindex="-1"
>
<div
class="modal-dialog modal-lg"
>
<div
class="modal-content"
>
<div
class="modal-header"
>
<h5
class="modal-title"
id="leavingSiteDisclaimerLabel"
>
Text
</h5>
<button
aria-label="Close"
class="btn-close"
data-bs-dismiss="modal"
type="button"
/>
</div>
<div
class="modal-body text-start"
>
<p />
</div>
<div
class="modal-footer"
>
<button
class="btn btn-primary"
type="button"
>
Text
</button>
<button
class="btn btn-secondary"
data-bs-dismiss="modal"
type="button"
>
Text
</button>
</div>
</div>
</div>
</div>
</div>
`;

exports[`LeavingSiteDisclaimerModal component > LeavingSiteDisclaimerModal renders correctly 1`] = `
<div>
<div
aria-hidden="true"
aria-labelledby="leavingSiteDisclaimerLabel"
class="modal fade"
id="leavingSiteDisclaimerModal"
style="z-index: 10000;"
tabindex="-1"
>
<div
class="modal-dialog modal-lg"
>
<div
class="modal-content"
>
<div
class="modal-header"
>
<h5
class="modal-title"
id="leavingSiteDisclaimerLabel"
>
Text
</h5>
<button
aria-label="Close"
class="btn-close"
data-bs-dismiss="modal"
type="button"
/>
</div>
<div
class="modal-body text-start"
>
<p />
</div>
<div
class="modal-footer"
>
<button
class="btn btn-primary"
type="button"
>
Text
</button>
<button
class="btn btn-secondary"
data-bs-dismiss="modal"
type="button"
>
Text
</button>
</div>
</div>
</div>
</div>
</div>
`;
55 changes: 55 additions & 0 deletions src/components/LeavingSiteDisclaimerModal/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
import React, { useState } from "react";
import { Trans } from 'gatsby-plugin-react-i18next';

const LeavingSiteDisclaimerModal = () => {

const [message, setMessage] = useState('');
const [location, setLocation] = useState('');

if (typeof window !== `undefined`) {
window.addEventListener('show.bs.modal', (event: Event) => {
let button = event.relatedTarget;
setMessage(button.getAttribute('data-bs-message'))
setLocation(button.getAttribute('data-bs-location'))
});
}

return (
<>
<div className="modal fade" id="leavingSiteDisclaimerModal" tabIndex={-1} aria-labelledby="leavingSiteDisclaimerLabel" aria-hidden="true" style={{zIndex: '10000'}}>
<div className="modal-dialog modal-lg">
<div className="modal-content">
<div className="modal-header">
<h5 className="modal-title" id="leavingSiteDisclaimerLabel">
<Trans i18nKey='leaving.site.disclaimer.modal.title' defaults='Disclaimer - You are going to leave our website' />
</h5>
<button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div className="modal-body text-start">
<p>
{message}
</p>
</div>
<div className="modal-footer">
<button
type="button"
className="btn btn-primary"
onClick={(event: React.MouseEvent<HTMLButtonElement>): void => {
event.preventDefault();
window.location.assign(location);
}}
>
<Trans i18nKey='leaving.site.disclaimer.modal.continue' defaults='Continue' />
</button>
<button type="button" className="btn btn-secondary" data-bs-dismiss="modal">
<Trans i18nKey='leaving.site.disclaimer.modal.close' defaults='Close' />
</button>
</div>
</div>
</div>
</div>
</>
);
};

export default LeavingSiteDisclaimerModal;

0 comments on commit 51b978e

Please sign in to comment.