Ajout nouvelles options financement participatif du projet (suite)

This commit is contained in:
Fabrice PENHOËT 2020-09-07 18:37:19 +02:00
parent 61e406bb8a
commit 71b71a2520
2 changed files with 206 additions and 0 deletions

View File

@ -0,0 +1,119 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Participez au financement de WikiLerni. Votre nom sur la page d'un des quizs.">
<title>Prix libre et financement participatif de WikiLerni</title>
<!-- Version lisible des scripts : https://gitlab.com/lefablab/wikilerni/-/tree/master/front/src -->
<script src="/JS/polyfill.app.js" defer></script>
<script src="/JS/paymentPage.app.js" defer></script>
<link rel="shortcut icon" href="/img/favicon.ico">
<link rel="stylesheet" href="/themes/wikilerni/css/style.css">
<link rel="canonical" href="https://www.wililerni.com/participer-financement.html">
</head>
<body class="cardboard">
<!-- En tête -->
<header class="cardboard">
<a href="/" title="Page d'accueil WikLerni"><img src="/themes/wikilerni/img/wikilerni-purple-2-128.png" alt="WikiLerni (logo)" title="Accéder à la page d'accueil de WikiLerni" /></a>
<ul id="headLinks">
<li><a href="/contact.html" rel="nofollow">Contact</a></li>
<li><a href="/quizs/" id="indexHeadLink" title="Les derniers quizs">Parcourir</a></li>
<li><a href="/connexion.html" id="accountHeadLink">Mon compte</a></li>
<li><a href="/a-propos.html">À propos</a></li>
<li><a href="/" title="Page d'accueil de WikiLerni">Accueil</a></li>
</ul>
</header>
<div id="prompt" class="cardboard">
<a href="/" title="Page d'accueil WikLerni"><img src="/themes/wikilerni/img/wikilerni-purple-2-512.png" alt="Logo WikiLerni" title="W I K I L E R N I" /></a>
<p>Cultivons notre jardin !</p>
</div>
<div id="page" class="cardboard">
<div class="framed engraved">
<h2>Financement participatif</h2>
<p><b>WikiLerni vous propose des quizs gratuitement, sans vous imposer de publicité ou encore faire commerce de vos données personnelles.</b></p>
<p>Par ailleurs, <a href="/credits.html" target="_blank" title="En savoir plus ?">son contenu est "libre"</a>, c'est-à-dire que vous pouvez réutiliser ses quizs pour vos propres usages (associations, enseignement, etc.) et en les adaptant à votre besoin.</p>
<p>Mais <b>"libre" ne veut pas dire "gratuit"</b>, car il faut passer du temps pour vous proposer régulièrement de nouveaux quizs (choix, lecture et analyse des articles Wikipédia, rédaction des questions et réponses proposées, etc.). Cela prend en moyenne entre 2 et 3 heures par quiz.</p>
<p>Le logiciel libre permettant de faire fonctionner le site a lui-même nécessité plusieurs mois de travail et continue à évoluer.</p>
<h2>Prix libre ?</h2>
<p>Pour assurer son financement, WikiLerni pratique le "prix libre", c'est-à-dire que <b>vous pouvez choisir quel montant vous acceptez de payer pour continuer à utiliser WikiLerni</b>.</p>
<p><b>Il ne s'agit donc pas d'un don, mais d'un financement participatif</b>. Sans ce financement, le site WikiLerni <b>cessera son activité</b> et vous ne pourrez plus l'utiliser.</p>
<p>Vous pouvez donc choisir en conscience ce que vous pouvez et souhaitez payer pour WikiLerni.</p>
<p><b>Quelques contreparties sont prévues pour les personnes participantes.</b></p>
<p>Dès le premier prix proposé, <b>9 € TTC</b>, vous pourrez bénéficier d'un abonnement à WikiLerni durant 180 jours vous permettant d'enregistrer vos résultats aux quizs, ou encore de recevoir régulièrement de nouvelles suggestions de lecture et quiz. D'autres fonctionnalités seront ajoutées dans l'avenir.</p>
<h2>Dédicacez des quizs WikiLerni</h2>
<p>À partir de 18 € TTC, pour vous remercier vous pourrez demander à <b>apposer votre nom sur la page d'un ou plusieurs des quizs publiés</b> sur WikiLerni</b>.</p>
<p>Il peut s'agir de votre nom / pseudonyme ou celui de la personne à qui vous le dédicacez. <b>Je vous contacterai pour vous demander.</b></p>
<p>Si vous souhaitez apposer le nom, voire le lien internet d'<b>une activité commerciale ou associative</b>, c'est aussi possible dans certaines conditions, mais merci de d'abord <a href="/contact.html">me contacter pour avis</a>.</p>
<p>Cette dédicace est évidemment facultative et vous pouvez très bien participer au financement juste pour pouvoir continuer à utiliser WikiLerni.</p>
<h2>WikiLerni s'adapte à vous</h2>
<p>Vous aimez WikiLerni, mais ne pouvez vraiment pas payer ? Vous préférez un autre montant ou un autre moyen de paiement (chèque, virement) ? Ou encore vous avez besoin d'explications ? Alors <a href="/contact.html">contactez-moi</a>. <b>Je me ferai un plaisir de vous répondre et d'essayer de m'adapter à chaque situation</b> !</p>
<h2>Participez au financement</h2>
<p>Une fois sélectionné le montant qui vous convient, il vous faut <b>cocher la case de validation des Conditions Générales de Vente</b>, pour voir apparaître un bouton de paiement qui vous mènera <b>sur l'outil de facturation et paiement en ligne de la société WebPortage</b>.</p>
<ul class="checkbox_li">
<li class="checkbox_li">
<label for="abo9" class="check"><input type="checkbox" id="abo9" name="abo9" value="true" /><div class="checkbox_override"></div> Je souhaite payer 9 € TTC et bénéficier d'un abonnement à WikiLerni pendant 180 jours.</label>
</li>
<li class="checkbox_li">
<label for="abo18" class="check"><input type="checkbox" id="abo18" name="abo18" value="true" /><div class="checkbox_override"></div> Je souhaite payer 18 € TTC et pouvoir ajouter une dédicace sur 1 des quizs WikiLerni.</label>
</li>
<li class="checkbox_li">
<label for="abo36" class="check"><input type="checkbox" id="abo36" name="abo36" value="true" /><div class="checkbox_override"></div>
Je souhaite payer 36 € TTC et pouvoir ajouter une dédicace sur 2 des quizs WikiLerni.</label>
</li>
<li class="checkbox_li">
<label for="abo54" class="check"><input type="checkbox" id="abo54" name="abo54" value="true" /><div class="checkbox_override"></div>
Je souhaite payer 54 € TTC et pouvoir ajouter une dédicace sur 4 des quizs WikiLerni.</label>
</li>
<li class="checkbox_li">
<label for="CGVOk" class="check" title="Vous devez d'abord choisir le montant de votre abonnement."><input type="checkbox" id="CGVOk" name="CGVOk" value="true" /><div class="checkbox_override"></div> <span class="info">J'ai lu et accepte les <a href="/CGV-CGU.html" target="_blank" rel="noopener">Condition Générales de Vente</a> (obligatoire).</span></label>
</li>
</ul>
<div id="WPBtns">
<div id="WPBtn9" class="needJS">
<h4>Paiement de votre abonnement de soutien à 9 € TTC.</h4>
<p class="info">Pour cette option, merci de commencer par <a href="/inscription.html">créer votre compte</a> et/ou <a href="/connexion.html">à vous y connecter</a>. Vous pourrez tester votre abonnement pendant 15 jours, après lesquels il vous sera demandé de payer.</p>
</div>
<div id="WPBtn18" class="needJS">
<h4>Financement participatif de 18 € TTC.</h4>
<script type="text/javascript" src="https://paiementsecurise.info/S-pan64po51vmnscc5-akchqCjm1d2okmXY.js"></script>
</div>
<div id="WPBtn36" class="needJS">
<h4>Financement participatif de 36 € TTC.</h4>
<script type="text/javascript" src="https://paiementsecurise.info/S-pan64po51vmnscc5-Ky3rkhutxXA6Otl7.js"></script>
</div>
<div id="WPBtn54" class="needJS">
<h4>Financement participatif de 54 € TTC.</h4>
<script type="text/javascript" src="https://paiementsecurise.info/S-pan64po51vmnscc5-OOv6cQBFs7t3EcYq.js"></script>
</div>
<p class="success">En cliquant sur le bouton de paiement, vous serez dirigé vers l'outil de facturation et de paiement en ligne.<br>Lors de votre premier abonnement, <b>vous devrez y créer un compte client, qui est distinct du compte utilisateur WikiLerni</b>.<br>Veillez bien à saisir une adresse e-mail correcte de manière à recevoir votre facture et me permettre de vous contacter pour connaître votre choix concernant la dédicace.</p>
</div>
<p>Enfin si vous n'utilisez pas vous-mêmes WikiLerni et ne souhaitez pas de dédicace, ni de facture... Mais que vous souhaitez tout de même soutenir le projet, ceci est possible <a href="https://liberapay.com/WikiLerni/" target="_blank" rel="noopener">en vous rendant sur le site Liberapay</a>. Merci à vous !</p>
</div>
</div>
<footer class="cardboard">
<ul id="footLinks">
<li><a href="https://framasphere.org/people/7e54b7a0b53201389eef2a0000053625" title="Blog WikiLerni sur diaspora*">Blog</a></li>
<li><a href="/credits.html">Crédits</a></li>
<li><a href="/mentions-legales.html" rel="nofollow">Mentions légales</a></li>
<li><a href="/donnees.html">Données personnelles</a></li>
<li><a href="/CGV-CGU.html" rel="nofollow">CGV &amp; CGU</a></li>
</ul>
</footer>
</body>
</html>

87
front/src/paymentPage.js Normal file
View File

@ -0,0 +1,87 @@
// -- GESTION DE LA PAGE DU FINANCEMENT PARTICIPATIF (SANS DEVOIR ÊTRE CONNECTÉ)
/// Permet d'afficher les boutons de paiement WP suivant le choix de l'utilisateur.
/// Matomo est également activité son internaute non connecté.
// Fichier de configuration tirés du backend :
import { availableLangs, theme } from "../../config/instance.js";
const lang=availableLangs[0];
const configTemplate = require("../../views/"+theme+"/config/"+lang+".js");
// Fonctions utiles au script :
import { getLocaly } from "./tools/clientstorage.js";
import { helloDev, updateAccountLink } from "./tools/everywhere.js";
import { loadMatomo } from "./tools/matomo.js";
import { checkSession } from "./tools/users.js";
import { showBtnPayment, unCheckAllOthers } from "./tools/webportage.js";
helloDev();
const initialise = async () =>
{
try
{
const isConnected=await checkSession();
if(isConnected)
{
// on change le lien du compte en haut :
const user=getLocaly("user", true);
updateAccountLink(user.status, configTemplate);
}
else
loadMatomo();
// Les boutons de paiement WP :
const CGV=document.getElementById("CGVOk");
const abo9=document.getElementById("abo9");
const abo18=document.getElementById("abo18");
const abo36=document.getElementById("abo36");
const abo54=document.getElementById("abo54");
const divWPBtns=document.getElementById("WPBtns");
divWPBtns.style.display="none";
abo9.addEventListener("change", function(e)
{
unCheckAllOthers("abo9");
});
abo18.addEventListener("change", function(e)
{
unCheckAllOthers("abo18");
});
abo36.addEventListener("change", function(e)
{
unCheckAllOthers("abo36");
});
abo54.addEventListener("change", function(e)
{
unCheckAllOthers("abo54");
});
CGV.addEventListener("change", function(e)
{
if(CGV.checked===true)
{
divWPBtns.style.display="block";
if(abo9.checked===true)
showBtnPayment("btn9");
else if(abo18.checked===true)
showBtnPayment("btn18");
else if(abo36.checked===true)
showBtnPayment("btn36");
else if(abo54.checked===true)
showBtnPayment("btn54");
else
{
divWPBtns.style.display="none";
CGV.checked=false;
}
}
else
divWPBtns.style.display="none";
});
}
catch(e)
{
console.error(e);
}
}
initialise();