Skip to content

K
kohinos-tav
Project 'cooperatic/kohinos-tav' was moved to 'agplv3/kohinos-tav'. Please update any links and bookmarks that may still have the old path.
Commit 928a32a7 by Félicie
Options

Merge branch '4244-upgrade-payment-screen' into 'develop' 

upgrade payment screens & process

See merge request cooperatic/kohinos-tav!17
parents d4e00db9 7fe922e9
Showing with 277 additions and 32 deletions
assets/css/app.css
......@@ -53,6 +53,15 @@ legend.required:after {
display: inline-block !important;
}
.header-placeholder {
height: 0.5rem;
}
.payment-page-header {
display: flex;
justify-content: space-between;
}
#code-digits-container {
display: flex;
flex-wrap: wrap;
......@@ -87,11 +96,11 @@ legend.required:after {
}
#code-visual {
height: 60px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
font-size: 2rem;
font-size: 3rem;
}
#payment-validation-subheader {
......@@ -105,4 +114,183 @@ legend.required:after {
.formEncaisserCotisationAdherent-no-profile {
font-style: italic;
color: #ff4136;
}
\ No newline at end of file
}
form[name="formEncaissement"] label {
font-size: 1.3rem;
}
.payment-done-container {
display: flex;
flex-direction: column;
align-items: center;
gap: 15px;
}
.payment-done-title {
color: #4CAF50;
font-weight: bold;
}
/**
* Success check animation.
* Extracted from: SweetAlert
* Modified by: Istiak Tridip
*/
.success-checkmark {
width: 80px;
height: 115px;
margin: 0 auto;
}
.success-checkmark .check-icon {
width: 80px;
height: 80px;
position: relative;
border-radius: 50%;
box-sizing: content-box;
border: 4px solid #4CAF50;
}
.success-checkmark .check-icon::before {
top: 3px;
left: -2px;
width: 30px;
transform-origin: 100% 50%;
border-radius: 100px 0 0 100px;
}
.success-checkmark .check-icon::after {
top: 0;
left: 30px;
width: 60px;
transform-origin: 0 50%;
border-radius: 0 100px 100px 0;
animation: rotate-circle 4.25s ease-in;
}
.success-checkmark .check-icon::before, .success-checkmark .check-icon::after {
content: '';
height: 100px;
position: absolute;
background: #FFFFFF;
transform: rotate(-45deg);
}
.success-checkmark .icon-line {
height: 5px;
background-color: #4CAF50;
display: block;
border-radius: 2px;
position: absolute;
z-index: 10;
}
.success-checkmark .icon-line.line-tip {
top: 46px;
left: 14px;
width: 25px;
transform: rotate(45deg);
animation: icon-line-tip 0.75s;
}
.success-checkmark .icon-line.line-long {
top: 38px;
right: 8px;
width: 47px;
transform: rotate(-45deg);
animation: icon-line-long 0.75s;
}
.success-checkmark .icon-circle {
top: -4px;
left: -4px;
z-index: 10;
width: 80px;
height: 80px;
border-radius: 50%;
position: absolute;
box-sizing: content-box;
border: 4px solid rgba(76, 175, 80, .5);
}
.success-checkmark .icon-fix {
top: 8px;
width: 5px;
left: 26px;
z-index: 1;
height: 85px;
position: absolute;
transform: rotate(-45deg);
background-color: #FFFFFF;
}
@keyframes rotate-circle {
0% {
transform: rotate(-45deg);
}
5% {
transform: rotate(-45deg);
}
12% {
transform: rotate(-405deg);
}
100% {
transform: rotate(-405deg);
}
}
@keyframes icon-line-tip {
0% {
width: 0;
left: 1px;
top: 19px;
}
54% {
width: 0;
left: 1px;
top: 19px;
}
70% {
width: 50px;
left: -8px;
top: 37px;
}
84% {
width: 17px;
left: 21px;
top: 48px;
}
100% {
width: 25px;
left: 14px;
top: 45px;
}
}
@keyframes icon-line-long {
0% {
width: 0;
right: 46px;
top: 54px;
}
65% {
width: 0;
right: 46px;
top: 54px;
}
84% {
width: 55px;
right: 0px;
top: 35px;
}
100% {
width: 47px;
right: 8px;
top: 38px;
}
}
/**
* END Success check animation.
*/
\ No newline at end of file
assets/js/app.js
......@@ -492,13 +492,13 @@ $(function() {
$("#formEncaissement_payment_code").val('');
// Set payment summary on validation page
let paymentValidationSubheaderText = `${$("#formEncaissement_adherent option:selected").text()} - Montant : ${$("#formEncaissement_montant").val()}`;
$("#payment-validation-subheader").text(paymentValidationSubheaderText);
$(".payment-recap").text(`${$("#formEncaissement_adherent option:selected").text()}, montant : ${$("#formEncaissement_montant").val()}`);
}
/**
* On cashing payment, validation code screen, add digit to input when corresponding button clicked.
*/
$(".payment-code-button").off("click");
$(".payment-code-button").on("click", function() {
// Get existing input
let code = $("#formEncaissement_payment_code").val();
......@@ -511,6 +511,7 @@ $(function() {
$("#code-visual").text("*".repeat(code.length));
});
$(".payment-code-correction-button").off("click");
$(".payment-code-correction-button").on("click", function() {
// Get existing input
let code = $("#formEncaissement_payment_code").val();
......
public/build/app.79a96478.js deleted 100644 → 0
This source diff could not be displayed because it is too large. You can view the blob instead.
public/build/app.2a0f820a.css → public/build/app.8f9aaf53.css
This source diff could not be displayed because it is too large. You can view the blob instead.
public/build/app.fe8f482e.js 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
public/build/entrypoints.json
......@@ -3,10 +3,10 @@
"app": {
"js": [
"/build/runtime.6ad5c9da.js",
"/build/app.79a96478.js"
"/build/app.fe8f482e.js"
],
"css": [
"/build/app.2a0f820a.css"
"/build/app.8f9aaf53.css"
]
},
"admin": {
......
public/build/manifest.json
{
"build/app.css": "/build/app.2a0f820a.css",
"build/app.js": "/build/app.79a96478.js",
"build/app.css": "/build/app.8f9aaf53.css",
"build/app.js": "/build/app.fe8f482e.js",
"build/admin.css": "/build/admin.5dc0eea7.css",
"build/admin.js": "/build/admin.8a6adf4b.js",
"build/runtime.js": "/build/runtime.6ad5c9da.js",
......
src/Controller/UserController.php
......@@ -256,14 +256,6 @@ class UserController extends AbstractController
$data = $form->getData();
if ($form->isValid()) {
$input_code = $data["payment_code"];
$validation = true; // As soon as the form is submitted & valid, we enter the validation process
if (empty($input_code)) {
// First step validated (set user & amount) -> go to validation
goto end;
}
$adherent = $data["adherent"];
$adherent_code = $adherent->getPaymentCode();
......@@ -287,8 +279,16 @@ class UserController extends AbstractController
goto end;
}
$input_code = $data["payment_code"];
$validation = true; // When the form is submitted & valid, and the user account checks passed, we enter the validation process
if (empty($input_code)) {
// First step validated (set user & amount) -> go to validation
goto end;
}
// Check validation code
// NOTE as we use password salt, must change payment code if password changes
// NOTE as we use password salt, the user must change his payment code if his password changes
$encoded_input = crypt($input_code, $adherent->getUser()->getSalt());
if (!hash_equals($adherent_code, $encoded_input)) {
$this->addFlash(
......@@ -346,12 +346,7 @@ class UserController extends AbstractController
$this->operationUtils->executeOperations($flux);
$this->em->flush();
$this->addFlash(
'success',
$this->translator->trans('Transaction réussie !')
);
return $this->redirectToRoute('index');
return $this->redirectToRoute('encaissementSuccess');
} else {
$this->addFlash(
'error',
......@@ -366,4 +361,13 @@ class UserController extends AbstractController
'validation' => $validation
]);
}
/**
* @Route("/encaissement/succes", name="encaissementSuccess")
* @IsGranted({"ROLE_CAISSIER", "ROLE_PRESTATAIRE"})
*/
public function encaissementSuccessAction(Request $request)
{
return $this->render('@kohinos/tav/payment_done_page.html.twig', []);
}
}
src/Form/Type/EncaissementFormType.php
......@@ -36,7 +36,7 @@ class EncaissementFormType extends AbstractType
],
'placeholder' => 'Choisissez un.e adhérent.e',
'required' => true,
'label' => 'Adherent :',
'label' => 'Habitant•e : ',
'choice_label' => 'name'
])
->add('montant', NumberType::class, [
......
templates/themes/kohinos/tav/block/encaisser_paiement.html.twig
......@@ -5,6 +5,6 @@
{% endblock blocktitle %}
{% block blockcontent %}
<a class='btn btn-xs btn-primary mt-2' href='{{ path('encaissement') }}'>
{{ 'Encaisser'|trans }}
{{ 'Terminal de paiement'|trans }}
</a>
{% endblock blockcontent %}
templates/themes/kohinos/tav/encaissement_page.html.twig
{% extends '@kohinos/common/layout.html.twig' %}
{% block header %}
<div class="header-placeholder"></div>
{% endblock header %}
{% block content %}
<div class='container' style='max-width: 800px;'>
{% include '@kohinos/block/breadcrumb.html.twig' with {'label': 'Encaissement'} %}
{% if validation != true %}
<div class="mt-3 payment-page-header">
<a href='{{ path('index') }}'>
<i class="fas fa-chevron-circle-left"></i> {{ 'Retour'|trans }}
</a>
<b>{{ app.session.get('_prestagere') }}</b>
</div>
{% if validation == true %}
<h2 class='text-center w-100 mt-4 mb-4'>{{ "Code de validation de l'habitant·e"|trans }}</h2>
<div id="payment-validation-subheader"></div>
<h2 class='text-center w-100 mt-4 mb-4'>{{ "Paiement en Monnaie Solidaire"|trans }}</h2>
{% else %}
<h2 class='text-center w-100 mt-4 mb-4'>{{ "Encaissement"|trans }}</h2>
<div class="mt-3 payment-page-header">
<a href='{{ path('encaissement') }}'>
<i class="fas fa-chevron-circle-left"></i> {{ 'Retour'|trans }}
</a>
<b>{{ app.session.get('_prestagere') }}</b>
</div>
<h2 class='text-center w-100 mt-4 mb-4 payment-recap'></h2>
<div id="payment-validation-subheader">{{ "Veuillez entrer votre code de validation"|trans }}</div>
{% endif %}
<br/>
<div class='text-center mb-5'>
{{ form_start(form, {'attr': {'autocomplete': 'off'}}) }}
......@@ -39,8 +56,13 @@
{% else %}
{{ form_row(form.adherent) }}
{{ form_row(form.montant) }}
<br/>
{% endif %}
<br/>
{{ form_end(form) }}
</div>
</div>
{% endblock %}
{% block footer %}{% endblock footer %}
\ No newline at end of file
templates/themes/kohinos/tav/payment_done_page.html.twig 0 → 100644
{% extends '@kohinos/common/layout.html.twig' %}
{% block header %}{% endblock header %}
{% block content %}
<div class='container' style='max-width: 800px;'>
<div class="payment-done-container">
<h1 class="text-center w-100 mt-4 payment-done-title">Paiement réussi !</h1>
<br/>
<div class="success-checkmark">
<div class="check-icon">
<span class="icon-line line-tip"></span>
<span class="icon-line line-long"></span>
<div class="icon-circle"></div>
<div class="icon-fix"></div>
</div>
</div>
<br/>
<a class='btn btn-xs btn-primary mt-4' href='{{ path('encaissement') }}'>
{{ 'Nouvel encaissement'|trans }}
</a>
</div>
{% endblock %}
{% block footer %}{% endblock footer %}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment