Skip to content

Refonte visuelle de la page de paiement des cotisations entreprise #2378

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
vgreb wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Refonte visuelle de la page de paiement des cotisations entreprise #2378

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
123 changes: 84 additions & 39 deletions templates/site/company_membership/payment.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,42 +1,87 @@
{% extends 'admin/association/membership/_base.html.twig' %}
{% block page_content %}
<article id="company-membership-payment">
<h1>Adhésion entreprise à l'AFUP</h1>
<h2>Adhésion enregistrée !</h2>
<p>
Votre inscription a bien été enregistrée ! Il ne vous reste plus qu'à régler votre cotisation.
</p>
<p>
Montant de la cotisation: {{ invoice.montant|number_format(2, '.', ' ') }} Euros
</p>
<h2>Facture disponible</h2>
{% extends 'layouts/site.html.twig' %}

<p>
<a href="{{ url('company_membership_invoice', {invoiceNumber: invoice.numeroFacture, token: invoice.token}) }}" class="button">Télécharger la facture</a>
</p>
<h2>Régler votre cotisation par Carte Bleue</h2>
{{ paybox|raw }}
<h2>Régler votre cotisation par chèque</h2>
<p>Libellez le chèque à cet ordre: {{ afup.raison_sociale }}. Indiquez au dos le numéro de facture: {{ invoice.numeroFacture }}</p>
<address>
{{ afup.raison_sociale }}<br />
{{ afup.adresse }}<br />
{{ afup.code_postal }} {{ afup.ville }}
</address>
<h2>Régler votre cotisation par virement bancaire</h2>
<p>
Lors d'un règlement par virement bancaire, indiquez ce libellé: {{ invoice.numeroFacture }}.
{% block title %}Régler votre cotisation - Adhésion entreprise - AFUP{% endblock %}

{% block metas %}
<meta name="robots" content="noindex, nofollow">
{% endblock %}

{% block content %}

<div class="container mx-auto flex flex-col px-4 py-6 gap-6 sm:px-28 sm:py-10 sm:gap-10">

<div class="flex flex-col gap-5">
<h1 class="font-titre text-afup-800 text-2xl sm:text-4xl">Adhésion entreprise à l'AFUP</h1>
<p class="text-neutre-700">
Votre inscription a bien été enregistrée&nbsp;! Il ne vous reste plus qu'à régler votre cotisation.
</p>
</div>

<twig:Card class="flex flex-col sm:flex-row sm:items-center gap-4 sm:gap-8 bg-afup-100 border-afup-300">
<div class="grow">
<p class="text-sm text-neutre-700">Montant de la cotisation</p>
<p class="font-titre text-2xl text-afup-800">{{ invoice.montant|number_format(2, ',', ' ') }}&nbsp;€</p>
<p class="text-sm text-neutre-700">Facture n° {{ invoice.numeroFacture }}</p>
</div>
<twig:Button as="a" variant="secondary" class="flex shrink-0 px-8 py-3 text-base"
href="{{ url('company_membership_invoice', {invoiceNumber: invoice.numeroFacture, token: invoice.token}) }}">
Télécharger la facture
</twig:Button>
</twig:Card>

<twig:SectionTitle>Régler votre cotisation</twig:SectionTitle>

<div class="grid grid-cols-1 lg:grid-cols-3 gap-4 sm:gap-8">

<twig:Card class="flex flex-col gap-4 h-full">
<h3 class="font-titre font-bold text-afup-800">Par carte bancaire</h3>
<p class="text-neutre-700 grow">Paiement immédiat et sécurisé via Paybox.</p>
{# Le formulaire est produit par AppBundle\Payment\Paybox : son <button> porte les classes
de buttons.css, que la nouvelle charte ne charge plus. On le restyle depuis le parent
plutôt que de toucher au PHP, partagé avec le tunnel billetterie encore en legacy. #}
<div class="[&_button]:inline-flex [&_button]:items-center [&_button]:justify-center [&_button]:whitespace-nowrap [&_button]:rounded-lg [&_button]:bg-ruby-500 [&_button]:px-8 [&_button]:py-3 [&_button]:font-semibold [&_button]:text-white [&_button]:hover:bg-ruby-700">
{{ paybox|raw }}
</div>
</twig:Card>

<twig:Card class="flex flex-col gap-4 h-full">
<h3 class="font-titre font-bold text-afup-800">Par chèque</h3>
<p class="text-neutre-700">
Libellez le chèque à l'ordre de <span class="font-medium text-afup-800">{{ afup.raison_sociale }}</span>
et indiquez au dos le numéro de facture <span class="font-medium text-afup-800">{{ invoice.numeroFacture }}</span>.
</p>
<address class="text-neutre-700 not-italic">
{{ afup.raison_sociale }}<br />
{{ afup.adresse }}<br />
{{ afup.code_postal }} {{ afup.ville }}
</address>
</twig:Card>

<twig:Card class="flex flex-col gap-4 h-full">
<h3 class="font-titre font-bold text-afup-800">Par virement bancaire</h3>
<p class="text-neutre-700">
Indiquez le libellé <span class="font-medium text-afup-800">{{ invoice.numeroFacture }}</span>.
</p>
<dl class="flex flex-col gap-2">
<div>
<dt class="text-sm text-neutre-700">IBAN</dt>
{# break-all : un IBAN ne comporte pas d'espace et déborderait de la carte. #}
<dd class="font-mono text-sm text-afup-800 break-all">{{ bankAccount.iban }}</dd>
</div>
<div>
<dt class="text-sm text-neutre-700">BIC / SWIFT</dt>
<dd class="font-mono text-sm text-afup-800">{{ bankAccount.bic }}</dd>
</div>
</dl>
</twig:Card>

</div>

<p class="text-sm text-neutre-400">
Si vous rencontrez le moindre problème, n'hésitez pas à nous écrire à
<a href="mailto:bonjour@afup.org" class="text-afup-500 underline hover:no-underline">bonjour (at) afup.org</a>.
</p>
<table>
<tr>
<th>IBAN</th><th>BIC/SWIFT</th>
</tr>
<tr>
<td>{{ bankAccount.iban }}</td><td>{{ bankAccount.bic }}</td>
</tr>
</table>


<p>Si vous rencontrez le moindre problème, n'hésitez pas à contacter l'AFUP par email: bonjour (at) afup.org.</p>
</article>

</div>

{% endblock %}
5 changes: 3 additions & 2 deletions tests/behat/features/PublicSite/Register.feature
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,8 +81,9 @@ Feature: Site Public - Register
And I fill in "company_member_phone" with "0123456"
And I fill in "company_member[invitations][0][email]" with "registeredUser@gmail.com"
And I press "Enregistrer mon adhésion"
And I should see "Adhésion enregistrée !"
And I should see "Montant de la cotisation: 180.00 Euros"
And I should see "Votre inscription a bien été enregistrée !"
And I should see "Montant de la cotisation"
And I should see "180,00 €"
When I press "Régler par carte"
# Pour suivre la redirection POST de Paybox
And I submit the form with name "PAYBOX"
Expand Down
Loading