Skip to content

refonte visuelle page d'adhésion des entreprises #2353

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
+138 −139
Open

refonte visuelle page d'adhésion des entreprises #2353

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
2 changes: 1 addition & 1 deletion sources/AppBundle/Association/Form/CompanyMemberType.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,7 +89,7 @@ public function buildForm(FormBuilderInterface $builder, array $options): void
'required' => false,
])
->add('recaptcha', EWZRecaptchaType::class, [
'label' => 'Vérification',
'label' => 'captcha',
'mapped' => false,
'constraints' => [
new RecaptchaIsValid(),
Expand Down
275 changes: 137 additions & 138 deletions templates/site/company_membership/adhesion_entreprise.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,167 +1,166 @@
{% extends 'admin/association/membership/_base.html.twig' %}
{% extends 'layouts/site.html.twig' %}
{% form_theme form 'form_themes/tailwind.html.twig' %}

{% block page_title %}Adhésion entreprise à l'AFUP{% endblock %}

{% block submenu %}
{{ render(controller(
'AppBundle\\Controller\\Website\\SecondaryMenuController::display',
{ 'feuille_id': constant('Afup\\Site\\Corporate\\Feuille::ID_FEUILLE_ASSOCIATION') }
)) }}
{% endblock %}

{% block page_content %}
<article id="company-membership">
<p>
Ce formulaire est réservé aux entreprises. Vous êtes un particulier ou un indépendant ?
Retrouvez le <a href="{{ url('member_membership') }}">formulaire d'adhésion dédié</a>.
{% block content %}
<div class="container mx-auto flex flex-col items-center px-4 my-5 gap-4">
<h1 class="font-titre font-normal text-5xl text-afup-800 text-center">{{ "Adhésion entreprise à l'AFUP"|trans }}</h1>
<p class="font-sans font-normal text-base text-neutre-700 text-center max-w-2xl">
{{ 'Ce formulaire est réservé aux entreprises. Vous êtes un particulier ou un indépendant ?'|trans }}
<a href="{{ path('member_membership') }}" class="text-afup-500 underline hover:no-underline">{{ "Retrouvez le formulaire d'adhésion dédié"|trans }}</a>
</p>
{{ form_start(form) }}
<fieldset>
<legend>Société</legend>
<div>

{{ form_start(form, {attr: {class: 'self-stretch'}}) }}

<twig:Card class="flex flex-col gap-8 px-6 py-12 sm:px-28 sm:py-12 my-5 sm:mb-10">
<twig:Card:Title type="form" class="text-2xl mb-0">{{ 'Créer votre compte entreprise'|trans }}</twig:Card:Title>
{{ form_errors(form) }}

<twig:Card:Section title="{{ 'Société'|trans }}">
{{ form_row(form.companyName) }}
{{ form_row(form.siret) }}
<div class="grid grid-cols-1 md:grid-cols-2 gap-7">
{{ form_row(form.siret) }}
{{ form_row(form.phone) }}
</div>
{{ form_row(form.address) }}
{{ form_row(form.zipcode) }}
{{ form_row(form.city) }}
</div>
</fieldset>
<fieldset>
<legend>Contact administratif</legend>
<div>
{{ form_row(form.firstName) }}
{{ form_row(form.lastName) }}
<div class="grid grid-cols-1 md:grid-cols-2 gap-7">
{{ form_row(form.zipcode) }}
{{ form_row(form.city) }}
</div>
</twig:Card:Section>

<twig:Card:Section title="{{ 'Contact administratif'|trans }}">
<div class="grid grid-cols-1 md:grid-cols-2 gap-7">
{{ form_row(form.lastName) }}
{{ form_row(form.firstName) }}
</div>
{{ form_row(form.email) }}
{{ form_row(form.phone) }}
</div>
</fieldset>
<fieldset>
<legend>Membres rattachés</legend>
<div>
<p>Chaque membre va recevoir une invitation lui permettant de créer son compte, rattaché à votre compte entreprise.</p>
</twig:Card:Section>

<twig:Card:Section title="{{ 'Membres rattachés'|trans }}">
<p class="font-sans font-normal text-sm text-neutre-700">{{ 'Chaque membre va recevoir une invitation lui permettant de créer son compte, rattaché à votre compte entreprise.'|trans }}</p>
{{ form_row(form.maxMembers) }}
<div id="company_member_invitations" data-prototype="{{ form_widget(form.invitations.vars.prototype)|e('html_attr') }}">
<div id="company_member_invitations" class="flex flex-col divide-y divide-neutre-300" data-prototype="{{ form_widget(form.invitations.vars.prototype)|e('html_attr') }}">
{% for invitation in form.invitations %}
<div>
<div class="grid grid-cols-1 sm:grid-cols-[1fr_auto] gap-3 py-3 first:pt-0 last:pb-0 sm:[&>*:last-child]:self-end">
{{ form_row(invitation.email) }}
{{ form_row(invitation.manager) }}
</div>
{% endfor %}
</div>
</div>
</twig:Card:Section>


</fieldset>
<twig:Card:Section title="{{ 'Sécurité'|trans }}">
{{ form_row(form.recaptcha) }}
</twig:Card:Section>

<fieldset>
<div>
{{ form_row(form.recaptcha) }}
<div class="flex flex-col-reverse sm:flex-row items-center justify-between gap-4 border-t-2 border-neutre-300 pt-5">
<p class="font-sans font-normal text-sm text-neutre-700">Si vous rencontrez le moindre problème, n'hésitez pas à contacter l'AFUP par email: bonjour (at) afup.org.</p>
{{ form_widget(form.save, {attr: { "class": "flex flex-row justify-center items-center py-3 px-8 gap-2 bg-ruby-500 rounded-lg font-sans font-semibold text-base text-white text-center"}}) }}
</div>
</fieldset>

<div class="right">
{{ form_widget(form.save, {attr: { "class": "button button--call-to-action"}}) }}
</div>

{{ form_widget(form) }}
</twig:Card>
{{ form_end(form) }}

<div class="w-full flex flex-col gap-5 my-5">
<h2 class="font-titre font-normal text-3xl text-afup-800 text-center">{{ 'Questions fréquentes'|trans }}</h2>

<div class="grid grid-cols-1 md:grid-cols-2 gap-5">
<twig:Card class="flex flex-col gap-2">
<h3 class="font-sans font-semibold text-base text-afup-800">{{ "Pourquoi adhérer à l'AFUP ?"|trans }}</h3>
<p class="font-sans font-normal text-sm text-neutre-700">
{{ "Adhérer à l'AFUP pour une entreprise du monde PHP, c'est soutenir la communauté du langage sur lequel reposent ses outils, assurant une dynamique positive à l'écosystème. C'est également la possibilité pour vos développeurs de bénéficier des mailing lists réservées aux membres et faire partie d'un réseau de professionnels."|trans }}
</p>
</twig:Card>

<twig:Card class="flex flex-col gap-2">
<h3 class="font-sans font-semibold text-base text-afup-800">{{ "Comment régler l'adhésion ?"|trans }}</h3>
<p class="font-sans font-normal text-sm text-neutre-700">
{{ "L'adhésion peut être réglée par carte bancaire, virement ou chèque. Seule l'adhésion par carte bancaire permet une adhésion immédiate. Dans le cas des autres modes de paiement, l'adhésion est activée lors de la réception du paiement."|trans }}
</p>
</twig:Card>

<twig:Card class="flex flex-col gap-2">
<h3 class="font-sans font-semibold text-base text-afup-800">{{ 'Comment gérer les membres rattachés à mon compte ?'|trans }}</h3>
<p class="font-sans font-normal text-sm text-neutre-700">
{{ 'Vous devez toujours avoir au moins un membre ayant les droits de gestion sur votre compte. Ce dernier pourra gérer les membres rattachés, effectuer le règlement des adhésions et collecter les factures.'|trans }}
</p>
</twig:Card>

<twig:Card class="flex flex-col gap-2">
<h3 class="font-sans font-semibold text-base text-afup-800">{{ 'Comment est faite la reconduction ?'|trans }}</h3>
<p class="font-sans font-normal text-sm text-neutre-700">
{{ "L'adhésion à l'AFUP est réalisée pour un an à partir de l'enregistrement de votre cotisation. Un mois avant l'échéance, nous vous avertirons que votre adhésion arrive à expiration. Vous pourrez alors choisir de régler à nouveau votre adhésion ou la laisser expirer. 15 jours après expiration de votre adhésion, si celle-ci n'a pas été renouvelée, les comptes de vos membres seront désactivés, ils perdront alors tous les avantages de votre adhésion."|trans }}
</p>
</twig:Card>
</div>
</div>
</div>

<script type="text/javascript">
// keep track of how many email fields have been rendered
var emailCount = {{ form.invitations|length }};
<script type="text/javascript">
// keep track of how many email fields have been rendered
var emailCount = {{ form.invitations|length }};

document.querySelector('#company_member_maxMembers').onchange = function(e)
{
var numberOfMembers = parseInt(this.value, 10); // Number of wanted invitations
var invitations = document.querySelector('#company_member_invitations');
document.querySelector('#company_member_maxMembers').onchange = function(e)
{
var numberOfMembers = parseInt(this.value, 10); // Number of wanted invitations
var invitations = document.querySelector('#company_member_invitations');

var numberOfInvitations = invitations.children.length; // Number of displayed invitations
var numberOfInvitations = invitations.children.length; // Number of displayed invitations

if (numberOfMembers == numberOfInvitations) {
return;
}
if (numberOfMembers > numberOfInvitations) {
for (var i = numberOfInvitations; i < numberOfMembers; i++) {
addInvitation();
}
if (numberOfMembers == numberOfInvitations) {
return;
}
if (numberOfMembers > numberOfInvitations) {
for (var i = numberOfInvitations; i < numberOfMembers; i++) {
addInvitation();
}
if (numberOfMembers < numberOfInvitations) {
for (var i = numberOfInvitations; i > numberOfMembers; i--) {
removeInvitation();
}
}
if (numberOfMembers < numberOfInvitations) {
for (var i = numberOfInvitations; i > numberOfMembers; i--) {
removeInvitation();
}
};

var addInvitation = function() {
var emailList = document.querySelector('#company_member_invitations');

// grab the prototype template
var newWidget = emailList.getAttribute('data-prototype');
// replace the "__name__" used in the id and name of the prototype
// with a number that's unique to your emails
// end name attribute looks like name="contact[emails][2]"
newWidget = newWidget.replace(/__name__label__/g, 'Membre #' + (emailCount+1));
newWidget = newWidget.replace(/__name__/g, emailCount);
emailCount++;

// create a new list element and add it to the list
var newDiv = document.createElement('div');
newDiv.innerHTML = newWidget;
emailList.appendChild(newDiv.childNodes[0]);
};

var removeInvitation = function()
{
var emailList = document.querySelector('#company_member_invitations');
emailList.removeChild(emailList.lastChild);
}
document.querySelector('#company_member_maxMembers').onchange();

// First member MUST be a manager
document.querySelector('#company_member_invitations_0_manager').setAttribute('checked', 'checked');
document.querySelector('#company_member_invitations_0_manager').setAttribute('disabled', 'disabled');
document.querySelector('#company_member_invitations_0_email').setAttribute('required', 'required');

</script>

<p>Si vous rencontrez le moindre problème, n'hésitez pas à contacter l'AFUP par email: bonjour (at) afup.org.</p>
<h2>Questions fréquentes</h2>
<ul>
<li>
<h3>Pourquoi adhérer à l'AFUP ?</h3>
<p>
Adhérer à l'AFUP pour une entreprise du monde PHP, c'est soutenir la communauté du langage sur lequel
reposent ses outils, assurant une dynamique positive à l'écosystème. C'est également la possibilité
pour vos développeurs de bénéficier des mailing lists réservées aux membres et faire partie d'un
réseau de professionnels.
</p>
</li>
<li>
<h3>Comment régler l'adhésion ?</h3>
<p>
L'adhésion peut être réglée par carte bancaire, virement ou chèque.
Seule l'adhésion par carte bancaire permet une adhésion immédiate. Dans le cas des autres modes de paiement,
l'adhésion est activée lors de la réception du paiement.
</p>
</li>
<li>
<h3>Comment gérer les membres rattachés à mon compte ?</h3>
<p>
Vous devez toujours avoir au moins un membre ayant les droits de gestion sur votre compte.
Ce dernier pourra gérer les membres rattachés, effectuer le règlement des adhésions et collecter les factures.
</p>
</li>
<li>
<h3>Comment est faite la reconduction ?</h3>
<p>
L'adhésion à l'AFUP est réalisée pour un an à partir de l'enregistrement de votre cotisation.
Un mois avant l'échéance, nous vous avertirons que votre adhésion arrive à expiration.
Vous pourrez alors choisir de régler à nouveau votre adhésion ou la laisser expirer.
15 jours après expiration de votre adhésion, si celle-ci n'a pas été renouvelée, les comptes
de vos membres seront désactivés, ils perdront alors tous les avantages de votre adhésion.
</p>
</li>
</ul>
</article>
};

var addInvitation = function() {
var emailList = document.querySelector('#company_member_invitations');

// grab the prototype template
var newWidget = emailList.getAttribute('data-prototype');
// replace the "__name__" used in the id and name of the prototype
// with a number that's unique to your emails
// end name attribute looks like name="contact[emails][2]"
newWidget = newWidget.replace(/__name__label__/g, 'Membre #' + (emailCount+1));
newWidget = newWidget.replace(/__name__/g, emailCount);
emailCount++;

// create a new row and add it to the list, matching the server-rendered row markup
var newRow = document.createElement('div');
newRow.className = 'grid grid-cols-1 sm:grid-cols-[1fr_auto] gap-3 py-3 first:pt-0 last:pb-0 sm:[&>*:last-child]:self-end';

// the prototype is a compound form widget, wrapped in its own container div;
// unwrap it so the email/checkbox fields become direct children of the grid row,
// matching the server-rendered rows above
var prototypeContainer = document.createElement('div');
prototypeContainer.innerHTML = newWidget;
newRow.append(...prototypeContainer.firstElementChild.childNodes);

emailList.appendChild(newRow);
};

var removeInvitation = function()
{
var emailList = document.querySelector('#company_member_invitations');
emailList.removeChild(emailList.lastChild);
}
document.querySelector('#company_member_maxMembers').onchange();

// First member MUST be a manager
document.querySelector('#company_member_invitations_0_manager').setAttribute('checked', 'checked');
document.querySelector('#company_member_invitations_0_manager').setAttribute('disabled', 'disabled');
document.querySelector('#company_member_invitations_0_email').setAttribute('required', 'required');
</script>
{% endblock %}
Loading