Browse Source

add the Helloasso page

Olivier Massot 3 months ago
parent
commit
3d4987c387

+ 67 - 0
components/Ui/Button/HelloAssoConnect.vue

@@ -0,0 +1,67 @@
+<!--
+Bouton de connexion à HelloAsso
+
+@see https://dev.helloasso.com/docs/le-bouton-se-connecter-avec-helloasso
+-->
+<template>
+  <button class="HaAuthorizeButton">
+    <v-img
+      src="https://api.helloasso.com/v5/img/logo-ha.svg"
+      alt=""
+      class="HaAuthorizeButtonLogo"
+    />
+
+    <span class="HaAuthorizeButtonTitle">
+      {{ $t('connect_to_helloasso') }}
+    </span>
+  </button>
+</template>
+
+<script setup lang="ts">
+
+
+
+</script>
+
+<style scoped lang="scss">
+.HaAuthorizeButton {
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  background-color: #FFFFFF;
+  border: 0.0625rem solid #4B3FCF;
+  border-radius: 0.125rem;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  padding: 0;
+}
+.HaAuthorizeButton:disabled {
+  background-color: #4B3FCF;
+  border-color: transparent;
+  cursor: not-allowed;
+}
+.HaAuthorizeButton:not(:disabled):focus {
+  box-shadow: 0 0 0 0.25rem rgba(73, 211, 138, 0.25);
+  -webkit-box-shadow: 0 0 0 0.25rem rgba(73, 211, 138, 0.25);
+}
+.HaAuthorizeButtonLogo {
+  padding: 0 0.8rem;
+  width: 60px;
+}
+.HaAuthorizeButtonTitle {
+  background-color: #4B3FCF;
+  color: #FFFFFF;
+  font-size: 1rem;
+  font-weight: 700;
+  padding: 0.78125rem 1.5rem;
+}
+.HaAuthorizeButton:disabled .HaAuthorizeButtonTitle {
+  background-color: #4B3FCF;
+  color: #9A9DA8;
+}
+.HaAuthorizeButton:not(:disabled):hover .HaAuthorizeButtonTitle,
+.HaAuthorizeButton:not(:disabled):focus .HaAuthorizeButtonTitle {
+  background-color: #4B3FCF;
+}
+</style>

+ 4 - 0
config/abilities/pages/helloasso.yaml

@@ -0,0 +1,4 @@
+helloasso_page:
+  action: 'display'
+  conditions:
+    - { function: organizationHasAnyModule, parameters: ['GeneralConfig'] }

+ 4 - 1
i18n/lang/fr/general.json

@@ -503,6 +503,7 @@
   "attendances_breadcrumbs": "Absences",
   "equipment": "Parc matériel",
   "basicompta_admin": "Comptabilité BasiCompta",
+  "helloasso_admin": "HelloAsso",
   "education_state": "Suivi pédagogique",
   "criteria_notations": "Critères d'évaluation",
   "education_notation_configs": "Grilles d'évaluation",
@@ -823,5 +824,7 @@
   "information": "Information",
   "refresh_needed": "Actualisation requise",
   "refresh_needed_message": "La page a besoin d'être actualisée pour afficher les dernières modifications.",
-  "refresh_page": "Actualiser la page"
+  "refresh_page": "Actualiser la page",
+  "helloasso_presentation": "HelloAsso aide les associations à collecter des paiements en ligne et propose ses services gratuitement. Elle prend à sa charge tous les frais de transaction pour que vous puissiez bénéficier de la totalité des sommes versées par vos publics, sans frais. Les contributions volontaires laissées par ces derniers sont leur unique source de revenus.",
+  "connect_to_helloasso": "Connecter à HelloAsso"
 }

+ 45 - 0
pages/helloasso.vue

@@ -0,0 +1,45 @@
+<template>
+  <LayoutContainer>
+    <v-card>
+      <v-row>
+        <v-col cols="12" md="4" class="d-flex justify-center">
+          <v-img src="/images/logos/Logo-HelloAsso.svg" class="logo" />
+        </v-col>
+
+        <v-col cols="12" md="8">
+          {{ $t('helloasso_presentation') }}
+        </v-col>
+      </v-row>
+
+      <v-row>
+        <v-col cols="12" class="d-flex justify-center align-center w-100 mt-6">
+          <UiButtonHelloAssoConnect @click="onHelloAssoConnectClicked"/>
+        </v-col>
+      </v-row>
+    </v-card>
+  </LayoutContainer>
+</template>
+
+<script setup lang="ts">
+
+const onHelloAssoConnectClicked = () => {
+  console.log('helloasso connect clicked')
+}
+
+</script>
+
+<style scoped lang="scss">
+  .v-card {
+    padding: 48px;
+    max-width: 70%;
+    margin: 36px auto;
+
+    @media (max-width: 600px) {
+      max-width: 90%;
+    }
+  }
+
+  .logo {
+    max-width: 80%;
+  }
+</style>

+ 21 - 0
public/images/logos/Logo-HelloAsso.svg

@@ -0,0 +1,21 @@
+<svg xmlns="http://www.w3.org/2000/svg" id="Calque_1" viewBox="0 0 200 43.5">
+  <style>
+    .st0{fill:#2e2f5e}
+  </style>
+  <path d="M71.1 19.3v13.3h-6.6v-12c0-1.4-.4-1.8-1-1.8-.7 0-1.5.6-2.2 1.8v12h-6.6v-25l6.6-.7v9.4c1.5-1.6 3-2.3 5-2.3 3-.1 4.8 1.9 4.8 5.3zM90.3 25.5H79.6c.4 2.6 1.6 3 3.6 3 1.3 0 2.5-.5 4-1.6l2.7 3.7c-2 1.7-4.7 2.7-7.3 2.7-6.5 0-9.6-4.1-9.6-9.6 0-5.3 3-9.7 8.9-9.7 5.2 0 8.7 3.4 8.7 9.4-.1.5-.2 1.4-.3 2.1zm-6.3-4c0-1.8-.4-3.3-2.1-3.3-1.4 0-2.1.8-2.4 3.6H84v-.3zM92.1 27.4V7.5l6.6-.7v20.3c0 .6.3.9.8.9.2 0 .5 0 .7-.2l1.2 4.7c-1.2.4-2.4.6-3.6.6-3.7.2-5.7-2-5.7-5.7zM102.1 27.4V7.5l6.6-.7v20.3c0 .6.3.9.8.9.2 0 .5 0 .7-.2l1.2 4.7c-1.2.4-2.4.6-3.6.6-3.7.2-5.7-2-5.7-5.7zM129.4 23.6c0 5.9-3.5 9.6-9.2 9.6-5.6 0-9.2-3.4-9.2-9.7 0-5.9 3.5-9.6 9.2-9.6 5.6 0 9.2 3.5 9.2 9.7zm-11.5 0c0 3.6.7 4.9 2.4 4.9 1.6 0 2.4-1.4 2.4-4.9 0-3.6-.7-4.9-2.4-4.9s-2.5 1.5-2.4 4.9zM147.8 28.9l-1.3 4.3c-2.3-.2-3.8-.8-4.8-2.5-1.3 2-3.3 2.6-5.4 2.6-3.6 0-5.9-2.4-5.9-5.7 0-4 3-6.2 8.6-6.2h1.3v-.5c0-1.8-.6-2.3-2.6-2.3-1.6.1-3.1.4-4.6.9l-1.4-4.2c2.2-.9 4.6-1.4 7-1.4 5.7 0 8 2.2 8 6.6v6.2c0 1.3.3 1.9 1.1 2.2zm-7.5-1.4v-2.7h-.7c-1.9 0-2.7.6-2.7 2 0 1 .6 1.7 1.5 1.7.7.1 1.5-.3 1.9-1zM163.6 16.3l-2.3 3.6c-1.3-.8-2.7-1.3-4.2-1.3-1.1 0-1.5.3-1.5.8 0 .6.2.9 3.6 1.9 3.4 1.1 5.2 2.5 5.2 5.8 0 3.7-3.5 6.2-8.4 6.2-3.1 0-6-1.1-7.8-2.9l3.1-3.5c1.3 1 2.9 1.8 4.5 1.8 1.2 0 1.9-.4 1.9-1.1 0-.9-.4-1.1-3.4-2-3.3-1-5.2-2.9-5.2-5.8 0-3.2 2.8-5.8 7.7-5.8 2.6-.1 5.2.8 6.8 2.3zM180.1 16.3l-2.3 3.6c-1.3-.8-2.7-1.3-4.2-1.3-1.1 0-1.5.3-1.5.8 0 .6.2.9 3.6 1.9 3.4 1.1 5.2 2.5 5.2 5.8 0 3.7-3.5 6.2-8.4 6.2-3.1 0-6-1.1-7.8-2.9l3.1-3.5c1.3 1 2.9 1.8 4.5 1.8 1.2 0 1.9-.4 1.9-1.1 0-.9-.4-1.1-3.4-2-3.3-1-5.2-2.9-5.2-5.8 0-3.2 2.8-5.8 7.7-5.8 2.6-.1 5.1.8 6.8 2.3zM200 23.6c0 5.9-3.5 9.6-9.2 9.6-5.6 0-9.2-3.4-9.2-9.7 0-5.9 3.5-9.6 9.2-9.6 5.6 0 9.2 3.5 9.2 9.7zm-11.5 0c0 3.6.7 4.9 2.4 4.9 1.6 0 2.4-1.4 2.4-4.9 0-3.6-.7-4.9-2.4-4.9s-2.5 1.5-2.4 4.9z" class="st0"/>
+  <linearGradient id="SVGID_1_" x1="4.322" x2="24.268" y1="33.651" y2="-.503" gradientTransform="matrix(1 0 0 -1 0 44.736)" gradientUnits="userSpaceOnUse">
+    <stop offset="0" stop-color="#498a63"/>
+    <stop offset=".25" stop-color="#61b984"/>
+  </linearGradient>
+  <path fill="url(#SVGID_1_)" d="M12.9 34.9c-6.6-7.6-2.2-26.8.6-26.8C8.1 7.9-1.1 11.5.2 24.4c1.5 12 12.3 20.4 24.1 18.9 3.8-.5 7.3-2 10.3-4.3-10.4 7.5-17.4.8-21.7-4.1z"/>
+  <linearGradient id="SVGID_2_" x1="19.889" x2="40.524" y1="3.627" y2="36.697" gradientTransform="matrix(1 0 0 -1 0 44.736)" gradientUnits="userSpaceOnUse">
+    <stop offset="0" stop-color="#89356d"/>
+    <stop offset=".21" stop-color="#b94794"/>
+  </linearGradient>
+  <path fill="url(#SVGID_2_)" d="M37.2 21.9C31.7 33 14.8 37.7 12.9 34.8c3.3 4.9 11.5 11.6 21.8 4 9.4-7.3 11.1-21 3.8-30.5-2.3-3-5.4-5.3-8.9-6.8 11.7 5.3 10.5 14.6 7.6 20.4z"/>
+  <linearGradient id="SVGID_3_" x1="3.242" x2="37.689" y1="35.782" y2="23.384" gradientTransform="matrix(1 0 0 -1 0 44.736)" gradientUnits="userSpaceOnUse">
+    <stop offset=".6" stop-color="#f59c1c"/>
+    <stop offset="1" stop-color="#c7702b"/>
+  </linearGradient>
+  <path fill="url(#SVGID_3_)" d="M13.5 8.1c11.9-1.3 25.4 11 23.7 13.9 3.3-5.8 4.1-15.1-7.5-20.4C18.6-2.9 6 2.5 1.6 13.7.2 17.2-.3 21 .2 24.7-.6 11.9 9.1 8.5 13.5 8.1z"/>
+<script xmlns=""/></svg>

+ 28 - 0
services/layout/menuBuilder/helloAssoMenuBuilder.ts

@@ -0,0 +1,28 @@
+import type { MenuItem } from '~/types/layout'
+import { MENU_LINK_TYPE } from '~/types/enum/layout'
+import AbstractMenuBuilder from '~/services/layout/menuBuilder/abstractMenuBuilder'
+
+/**
+ * Menu Basicompta
+ */
+export default class BasicomptaMenuBuilder extends AbstractMenuBuilder {
+  static override readonly menuName = 'Basicompta'
+
+  build(): MenuItem | null {
+    // cf droit : https://ressources-opentalent.atlassian.net/wiki/spaces/SPEC/pages/32637034/Acc+s+basi+compta+pour+les+structures+de+la+CMF#Acces-a-Basicompta-pour-les-administrateurs
+    if (
+      (this.accessProfile.isAdminAccess ||
+        this.accessProfile.isAdministratifManager ||
+        this.accessProfile.isFinancialManager) &&
+        this.ability.can('display', 'helloasso_page')
+    ) {
+      return this.createItem(
+        'helloasso_admin',
+        { name: 'fas fa-suitcase' },
+        '/helloasso',
+        MENU_LINK_TYPE.INTERNAL,
+      )
+    }
+    return null
+  }
+}

+ 2 - 0
services/layout/menuBuilder/mainMenuBuilder.ts

@@ -13,6 +13,7 @@ import CotisationsMenuBuilder from '~/services/layout/menuBuilder/cotisationsMen
 import StatsMenuBuilder from '~/services/layout/menuBuilder/statsMenuBuilder'
 import Admin2iosMenuBuilder from '~/services/layout/menuBuilder/admin2iosMenuBuilder'
 import BasicomptaMenuBuilder from '~/services/layout/menuBuilder/basicomptaMenuBuilder'
+import HelloAssoMenuBuilder from '~/services/layout/menuBuilder/helloAssoMenuBuilder'
 
 /**
  * Menu principal (ou menu lateral)
@@ -35,6 +36,7 @@ export default class MainMenuBuilder extends AbstractMenuBuilder {
       this.buildSubmenu(RewardsMenuBuilder),
       this.buildSubmenu(WebsiteAdminMenuBuilder),
       this.buildSubmenu(BasicomptaMenuBuilder),
+      this.buildSubmenu(HelloAssoMenuBuilder),
       this.buildSubmenu(CotisationsMenuBuilder),
       this.buildSubmenu(StatsMenuBuilder),
       this.buildSubmenu(Admin2iosMenuBuilder),