From 99792e8610942d952dfe097069f4adb8af17ad86 Mon Sep 17 00:00:00 2001 From: Sylvain Date: Tue, 15 Jun 2021 17:34:12 +0200 Subject: [PATCH 01/57] WIP: migrate machine card to react --- .../components/machines/machine-card.tsx | 16 +++++++++++ .../javascript/controllers/machines.js.erb | 4 +-- app/frontend/src/javascript/models/machine.ts | 28 +++++++++++++++++++ .../machines/training_reservation_modal.html | 2 +- app/models/user.rb | 10 +++++-- app/views/api/machines/index.json.jbuilder | 6 ++-- app/views/api/machines/show.json.jbuilder | 10 +++---- 7 files changed, 64 insertions(+), 12 deletions(-) create mode 100644 app/frontend/src/javascript/components/machines/machine-card.tsx create mode 100644 app/frontend/src/javascript/models/machine.ts diff --git a/app/frontend/src/javascript/components/machines/machine-card.tsx b/app/frontend/src/javascript/components/machines/machine-card.tsx new file mode 100644 index 000000000..411c05b85 --- /dev/null +++ b/app/frontend/src/javascript/components/machines/machine-card.tsx @@ -0,0 +1,16 @@ +import React from 'react'; +import { Machine } from '../../models/machine'; + +interface MachineCardProps { + machine: Machine +} + +/** + * This component is a box showing the picture of the given machine and two buttons: one to start the reservation process + * and another to redirect the user to the machine description page. + */ +const MachineCard: React.FC = ({ machine }) => { + return ( +
+ ) +} diff --git a/app/frontend/src/javascript/controllers/machines.js.erb b/app/frontend/src/javascript/controllers/machines.js.erb index 068c7688f..f01cc0af9 100644 --- a/app/frontend/src/javascript/controllers/machines.js.erb +++ b/app/frontend/src/javascript/controllers/machines.js.erb @@ -112,14 +112,14 @@ const _reserveMachine = function (machine, e) { return machine = _this.Machine.get({ id: machine.id }, function () { // if the currently logged'in user has completed the training for this machine, or this machine does not require // a prior training, just redirect him to the machine's booking page - if (machine.current_user_is_training || (machine.trainings.length === 0)) { + if (machine.current_user_is_trained || (machine.trainings.length === 0)) { return _this.$state.go('app.logged.machines_reserve', { id: machine.slug }); } else { // otherwise, if a user is authenticated ... if (_this.$scope.isAuthenticated()) { // ... and have booked a training for this machine, tell him that he must wait for an admin to validate // the training before he can book the reservation - if (machine.current_user_training_reservation) { + if (machine.current_user_next_training_reservation) { return _this.$uibModal.open({ templateUrl: '/machines/training_reservation_modal.html', controller: ['$scope', '$uibModalInstance', function ($scope, $uibModalInstance) { diff --git a/app/frontend/src/javascript/models/machine.ts b/app/frontend/src/javascript/models/machine.ts new file mode 100644 index 000000000..18d13aad9 --- /dev/null +++ b/app/frontend/src/javascript/models/machine.ts @@ -0,0 +1,28 @@ +import { Reservation } from './reservation'; + +export interface Machine { + id: number, + name: string, + description?: string, + spec?: string, + disabled: boolean, + slug: string, + machine_image: string, + machine_files_attributes?: Array<{ + id: number, + attachment: string, + attachment_url: string + }>, + trainings?: Array<{ + id: number, + name: string, + disabled: boolean, + }>, + current_user_is_trained?: boolean, + current_user_next_training_reservation?: Reservation, + machine_projects?: Array<{ + id: number, + name: string, + slug: string, + }> +} diff --git a/app/frontend/templates/machines/training_reservation_modal.html b/app/frontend/templates/machines/training_reservation_modal.html index 6b986a511..baf549ad7 100644 --- a/app/frontend/templates/machines/training_reservation_modal.html +++ b/app/frontend/templates/machines/training_reservation_modal.html @@ -3,7 +3,7 @@

{{ 'app.shared.training_reservation_modal.you_must_wait_for_your_training_is_being_validated_by_the_fablab_team_to_book_this_machine' }}

-

{{ 'app.shared.training_reservation_modal.your_training_will_occur_' | translate }} {{machine.current_user_training_reservation.slots[0].start_at | amDateFormat: 'LL'}} : {{machine.current_user_training_reservation.slots[0].start_at | amDateFormat:'LT'}} - {{machine.current_user_training_reservation.slots[0].end_at | amDateFormat:'LT'}}

+

{{ 'app.shared.training_reservation_modal.your_training_will_occur_' | translate }} {{machine.current_user_next_training_reservation.slots[0].start_at | amDateFormat: 'LL'}} : {{machine.current_user_next_training_reservation.slots[0].start_at | amDateFormat:'LT'}} - {{machine.current_user_next_training_reservation.slots[0].end_at | amDateFormat:'LT'}}

diff --git a/app/models/user.rb b/app/models/user.rb index 853046268..e08c1e485 100644 --- a/app/models/user.rb +++ b/app/models/user.rb @@ -127,8 +127,14 @@ class User < ApplicationRecord trainings.map(&:machines).flatten.uniq.include?(machine) end - def training_reservation_by_machine(machine) - reservations.where(reservable_type: 'Training', reservable_id: machine.trainings.map(&:id)).first + def next_training_reservation_by_machine(machine) + reservations.where(reservable_type: 'Training', reservable_id: machine.trainings.map(&:id)) + .includes(:slots) + .where('slots.start_at>= ?', DateTime.current) + .order('slots.start_at': :asc) + .references(:slots) + .limit(1) + .first end def subscribed_plan diff --git a/app/views/api/machines/index.json.jbuilder b/app/views/api/machines/index.json.jbuilder index ae1c6bea9..b9e8f5b76 100644 --- a/app/views/api/machines/index.json.jbuilder +++ b/app/views/api/machines/index.json.jbuilder @@ -1,5 +1,7 @@ +# frozen_string_literal: true + json.array!(@machines) do |machine| - json.extract! machine, :id, :name, :description, :spec, :slug, :disabled - + json.extract! machine, :id, :name, :slug, :disabled + json.machine_image machine.machine_image.attachment.medium.url if machine.machine_image end diff --git a/app/views/api/machines/show.json.jbuilder b/app/views/api/machines/show.json.jbuilder index 0645cc7a1..00165660b 100644 --- a/app/views/api/machines/show.json.jbuilder +++ b/app/views/api/machines/show.json.jbuilder @@ -1,6 +1,6 @@ # frozen_string_literal: true -json.extract! @machine, :id, :name, :description, :spec, :disabled, :created_at, :updated_at, :slug +json.extract! @machine, :id, :name, :description, :spec, :disabled, :slug json.machine_image @machine.machine_image.attachment.large.url if @machine.machine_image json.machine_files_attributes @machine.machine_files do |f| json.id f.id @@ -8,10 +8,10 @@ json.machine_files_attributes @machine.machine_files do |f| json.attachment_url f.attachment_url end json.trainings @machine.trainings.each, :id, :name, :disabled -json.current_user_is_training current_user.training_machine?(@machine) if current_user -if current_user && !current_user.training_machine?(@machine) && current_user.training_reservation_by_machine(@machine) - json.current_user_training_reservation do - json.partial! 'api/reservations/reservation', reservation: current_user.training_reservation_by_machine(@machine) +json.current_user_is_trained current_user.training_machine?(@machine) if current_user +if current_user && !current_user.training_machine?(@machine) && current_user.next_training_reservation_by_machine(@machine) + json.current_user_next_training_reservation do + json.partial! 'api/reservations/reservation', reservation: current_user.next_training_reservation_by_machine(@machine) end end From 5215f2089983cf8a53678465345dcda0562cba63 Mon Sep 17 00:00:00 2001 From: Sylvain Date: Wed, 16 Jun 2021 10:33:52 +0200 Subject: [PATCH 02/57] [bug] unable to sync users on stripe if one of them have an invalid email address --- CHANGELOG.md | 1 + app/workers/sync_objects_on_stripe_worker.rb | 8 ++++++-- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 5606bc5ce..efa7e8593 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,7 @@ # Changelog Fab-manager - Fix a bug: during the upgrade, unable to detect the target when not explicitly specified +- Fix a bug: unable to sync users on stripe if one of them have an invalid email address ## v5.0.4 2021 June 15 diff --git a/app/workers/sync_objects_on_stripe_worker.rb b/app/workers/sync_objects_on_stripe_worker.rb index 63eb29f1d..4add9fbef 100644 --- a/app/workers/sync_objects_on_stripe_worker.rb +++ b/app/workers/sync_objects_on_stripe_worker.rb @@ -11,10 +11,14 @@ class SyncObjectsOnStripeWorker User.online_payers.each_with_index do |member, index| logger.debug "#{index} / #{total}" begin - stp_customer = member.payment_gateway_object.gateway_object.retrieve + stp_customer = member.payment_gateway_object&.gateway_object&.retrieve StripeWorker.new.create_stripe_customer(member.id) if stp_customer.nil? || stp_customer[:deleted] rescue Stripe::InvalidRequestError - StripeWorker.new.create_stripe_customer(member.id) + begin + StripeWorker.new.create_stripe_customer(member.id) + rescue Stripe::InvalidRequestError => e + puts "Unable to create the customer #{member.id} do to a Stripe error: #{e}" + end end end From bc83bb92b95e3608da3f785089f2542a71e324e7 Mon Sep 17 00:00:00 2001 From: Sylvain Date: Wed, 16 Jun 2021 11:01:55 +0200 Subject: [PATCH 03/57] improved welcome message in setup script --- setup/setup.sh | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/setup/setup.sh b/setup/setup.sh index 999529944..6c757f500 100755 --- a/setup/setup.sh +++ b/setup/setup.sh @@ -19,7 +19,7 @@ welcome_message() echo -e "For \e[1mbug reports\e[21m, please open a new issue on https://github.com/sleede/fab-manager/issues" echo -e "You can call for \e[1mcommunity assistance\e[21m on https://forum.fab-manager.com/" printf "\nYou can interrupt this installation at any time by pressing Ctrl+C\n" - printf "If you do not feel confortable with this installation, you can \e[4msubscribe to one of our hosting offers\e[24m: https://www.fab-manager.com/saas-offer\n\n" + printf "If you do not feel confortable with this installation, you can \e[4msubscribe to our hosting offers\e[24m:\nhttps://www.fab-manager.com/saas-offer\n\n" read -rp "Continue? (Y/n) " confirm Date: Wed, 16 Jun 2021 11:44:53 +0200 Subject: [PATCH 04/57] [bug] unable to book a free event --- CHANGELOG.md | 1 + app/frontend/src/javascript/controllers/events.js.erb | 6 +++--- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index efa7e8593..12ad7c772 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,7 @@ - Fix a bug: during the upgrade, unable to detect the target when not explicitly specified - Fix a bug: unable to sync users on stripe if one of them have an invalid email address +- Fix a bug: unable to book a free event ## v5.0.4 2021 June 15 diff --git a/app/frontend/src/javascript/controllers/events.js.erb b/app/frontend/src/javascript/controllers/events.js.erb index d25b27740..f0b808715 100644 --- a/app/frontend/src/javascript/controllers/events.js.erb +++ b/app/frontend/src/javascript/controllers/events.js.erb @@ -126,8 +126,8 @@ Application.Controllers.controller('EventsController', ['$scope', '$state', 'Eve } ]); -Application.Controllers.controller('ShowEventController', ['$scope', '$state', '$stateParams', '$rootScope', 'Event', '$uibModal', 'Member', 'Reservation', 'Price', 'CustomAsset', 'Slot', 'eventPromise', 'growl', '_t', 'Wallet', 'AuthService', 'helpers', 'dialogs', 'priceCategoriesPromise', 'settingsPromise', - function ($scope, $state, $stateParams, $rootScope, Event, $uibModal, Member, Reservation, Price, CustomAsset, Slot, eventPromise, growl, _t, Wallet, AuthService, helpers, dialogs, priceCategoriesPromise, settingsPromise) { +Application.Controllers.controller('ShowEventController', ['$scope', '$state', '$stateParams', '$rootScope', 'Event', '$uibModal', 'Member', 'Reservation', 'Price', 'CustomAsset', 'Slot', 'eventPromise', 'growl', '_t', 'Wallet', 'AuthService', 'helpers', 'dialogs', 'priceCategoriesPromise', 'settingsPromise', 'LocalPayment', + function ($scope, $state, $stateParams, $rootScope, Event, $uibModal, Member, Reservation, Price, CustomAsset, Slot, eventPromise, growl, _t, Wallet, AuthService, helpers, dialogs, priceCategoriesPromise, settingsPromise, LocalPayment) { /* PUBLIC SCOPE */ // reservations for the currently shown event @@ -366,7 +366,7 @@ Application.Controllers.controller('ShowEventController', ['$scope', '$state', ' // set the attempting marker $scope.attempting = true; // save the reservation to the API - return Reservation.save(cartItems, function (reservation) { + return LocalPayment.confirm(cartItems, function (reservation) { // reservation successful afterPayment(reservation); return $scope.attempting = false; From 7fa89c826aea939ffe7b0edda1a3b94241e8780e Mon Sep 17 00:00:00 2001 From: Sylvain Date: Wed, 16 Jun 2021 14:46:47 +0200 Subject: [PATCH 05/57] [bug] can't see the dates for the next booked training session --- CHANGELOG.md | 1 + app/frontend/templates/machines/training_reservation_modal.html | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 12ad7c772..b696463e3 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,7 @@ - Fix a bug: during the upgrade, unable to detect the target when not explicitly specified - Fix a bug: unable to sync users on stripe if one of them have an invalid email address - Fix a bug: unable to book a free event +- Fix a bug: can't see the dates for the next booked training session, when the user is reserving a machine without the appropriate training ## v5.0.4 2021 June 15 diff --git a/app/frontend/templates/machines/training_reservation_modal.html b/app/frontend/templates/machines/training_reservation_modal.html index baf549ad7..8a0be4e58 100644 --- a/app/frontend/templates/machines/training_reservation_modal.html +++ b/app/frontend/templates/machines/training_reservation_modal.html @@ -3,7 +3,7 @@

{{ 'app.shared.training_reservation_modal.you_must_wait_for_your_training_is_being_validated_by_the_fablab_team_to_book_this_machine' }}

-

{{ 'app.shared.training_reservation_modal.your_training_will_occur_' | translate }} {{machine.current_user_next_training_reservation.slots[0].start_at | amDateFormat: 'LL'}} : {{machine.current_user_next_training_reservation.slots[0].start_at | amDateFormat:'LT'}} - {{machine.current_user_next_training_reservation.slots[0].end_at | amDateFormat:'LT'}}

+

{{ 'app.shared.training_reservation_modal.your_training_will_occur_' | translate }} {{machine.current_user_next_training_reservation.slots_attributes[0].start_at | amDateFormat: 'LL'}} : {{machine.current_user_next_training_reservation.slots_attributes[0].start_at | amDateFormat:'LT'}} - {{machine.current_user_next_training_reservation.slots_attributes[0].end_at | amDateFormat:'LT'}}

From 565002a124ff1046c5d2dfffb14658d395714297 Mon Sep 17 00:00:00 2001 From: Sylvain Date: Wed, 16 Jun 2021 18:03:06 +0200 Subject: [PATCH 06/57] WIP: migrate machines list to react --- app/frontend/src/javascript/api/machine.ts | 11 +++ .../components/machines/machine-card.tsx | 64 ++++++++++++++-- .../components/machines/machines-list.tsx | 47 ++++++++++++ app/frontend/src/stylesheets/application.scss | 2 + .../modules/machines/machine-card.scss | 75 +++++++++++++++++++ .../modules/machines/machines-list.scss | 4 + app/frontend/templates/machines/index.html | 53 +------------ config/locales/app.public.en.yml | 3 + 8 files changed, 205 insertions(+), 54 deletions(-) create mode 100644 app/frontend/src/javascript/api/machine.ts create mode 100644 app/frontend/src/javascript/components/machines/machines-list.tsx create mode 100644 app/frontend/src/stylesheets/modules/machines/machine-card.scss create mode 100644 app/frontend/src/stylesheets/modules/machines/machines-list.scss diff --git a/app/frontend/src/javascript/api/machine.ts b/app/frontend/src/javascript/api/machine.ts new file mode 100644 index 000000000..0146db7c3 --- /dev/null +++ b/app/frontend/src/javascript/api/machine.ts @@ -0,0 +1,11 @@ +import apiClient from './clients/api-client'; +import { AxiosResponse } from 'axios'; +import { Machine } from '../models/machine'; + +export default class MachineAPI { + static async index (): Promise> { + const res: AxiosResponse> = await apiClient.get(`/api/machines`); + return res?.data; + } +} + diff --git a/app/frontend/src/javascript/components/machines/machine-card.tsx b/app/frontend/src/javascript/components/machines/machine-card.tsx index 411c05b85..c81b4f72f 100644 --- a/app/frontend/src/javascript/components/machines/machine-card.tsx +++ b/app/frontend/src/javascript/components/machines/machine-card.tsx @@ -1,16 +1,70 @@ -import React from 'react'; +import React, { ReactNode } from 'react'; import { Machine } from '../../models/machine'; +import { useTranslation } from 'react-i18next'; +import { Loader } from '../base/loader'; interface MachineCardProps { - machine: Machine + machine: Machine, + onShowMachine: (machine: Machine) => void, + onReserveMachine: (machine: Machine) => void, } /** * This component is a box showing the picture of the given machine and two buttons: one to start the reservation process * and another to redirect the user to the machine description page. */ -const MachineCard: React.FC = ({ machine }) => { +const MachineCardComponent: React.FC = ({ machine, onShowMachine, onReserveMachine }) => { + const { t } = useTranslation('public'); + + const machinePicture = (): ReactNode => { + if (!machine.machine_image) { + return ( +
+ {machine.name} +
+ ); + } + + return ( +
+ ) + } + + const handleReserveMachine = (): void => { + onReserveMachine(machine); + } + + const handleShowMachine = (): void => { + onShowMachine(machine); + } return ( -
- ) +
+ {machinePicture()} +
+ {machine.name} +
+
+ {!machine.disabled && } + +
+
+ ); +} + + +export const MachineCard: React.FC = ({ machine, onShowMachine, onReserveMachine }) => { + return ( + + + + ); } diff --git a/app/frontend/src/javascript/components/machines/machines-list.tsx b/app/frontend/src/javascript/components/machines/machines-list.tsx new file mode 100644 index 000000000..4a50630d8 --- /dev/null +++ b/app/frontend/src/javascript/components/machines/machines-list.tsx @@ -0,0 +1,47 @@ +import React, { useEffect, useState } from 'react'; +import { Machine } from '../../models/machine'; +import { IApplication } from '../../models/application'; +import { react2angular } from 'react2angular'; +import { Loader } from '../base/loader'; +import MachineAPI from '../../api/machine'; +import { MachineCard } from './machine-card'; + +declare var Application: IApplication; + +interface MachinesListProps { + onError: (message: string) => void, + onShowMachine: (machine: Machine) => void, + onReserveMachine: (machine: Machine) => void, +} + +/** + * This component shows a list of all machines and allows filtering on that list. + */ +const MachinesList: React.FC = ({ onError, onShowMachine, onReserveMachine }) => { + const [machines, setMachines] = useState>(null); + + useEffect(() => { + MachineAPI.index() + .then(data => setMachines(data)) + .catch(e => onError(e)); + }, []); + + return ( +
+ {machines && machines.map(machine => { + return + })} +
+ ); +} + + +const MachinesListWrapper: React.FC = ({ onError, onShowMachine, onReserveMachine }) => { + return ( + + + + ); +} + +Application.Components.component('machinesList', react2angular(MachinesListWrapper, ['onError', 'onShowMachine', 'onReserveMachine'])); diff --git a/app/frontend/src/stylesheets/application.scss b/app/frontend/src/stylesheets/application.scss index 6161d722d..f4b3c828f 100644 --- a/app/frontend/src/stylesheets/application.scss +++ b/app/frontend/src/stylesheets/application.scss @@ -50,5 +50,7 @@ @import "modules/edit-plan-category"; @import "modules/delete-plan-category"; @import "modules/plans-filter"; +@import "modules/machines/machine-card"; +@import "modules/machines/machines-list"; @import "app.responsive"; diff --git a/app/frontend/src/stylesheets/modules/machines/machine-card.scss b/app/frontend/src/stylesheets/modules/machines/machine-card.scss new file mode 100644 index 000000000..8f271b0fd --- /dev/null +++ b/app/frontend/src/stylesheets/modules/machines/machine-card.scss @@ -0,0 +1,75 @@ +.machine-card { + background-color: #fff; + border: 1px solid #ddd; + border-radius: 6px; + margin: 0 15px 30px; + width: 30%; + min-width: 300px; + + .machine-picture { + height: 250px; + background-size: cover; + background-position: center; + transition: opacity 0.5s ease; + cursor: pointer; + padding: 0; + color: #333333; + background-color: #f5f5f5; + border-color: #ddd; + border-bottom: 1px solid transparent; + border-top-left-radius: 5px; + border-top-right-radius: 5px; + } + + .machine-name { + text-align: center; + padding: 15px; + font-size: 1.6rem; + text-transform: uppercase; + font-weight: 600; + color: #000; + margin: 0; + line-height: 1.8rem; + } + + .machine-actions { + padding: 0; + background-color: #fff; + border-top: 1px solid #ddd; + border-bottom-right-radius: 5px; + border-bottom-left-radius: 5px; + text-align: center; + display: flex; + + & > button { + border: none !important; + padding: 15px 12px; + display: block; + width: 50%; + background-color: #fbfbfb; + margin-bottom: 0; + font-weight: normal; + text-align: center; + white-space: nowrap; + vertical-align: middle; + touch-action: manipulation; + cursor: pointer; + background-image: none; + font-size: 16px; + line-height: 1.5; + border-radius: 4px; + + & > i { + margin-right: 5px; + } + + &.reserve-button { + border-right: 1px solid #dddddd !important; + } + + &.single-button { + width: 100%; + } + } + } +} diff --git a/app/frontend/src/stylesheets/modules/machines/machines-list.scss b/app/frontend/src/stylesheets/modules/machines/machines-list.scss new file mode 100644 index 000000000..833130b88 --- /dev/null +++ b/app/frontend/src/stylesheets/modules/machines/machines-list.scss @@ -0,0 +1,4 @@ +.machines-list { + display: flex; + flex-wrap: wrap; +} diff --git a/app/frontend/templates/machines/index.html b/app/frontend/templates/machines/index.html index 912ad18f8..b12e56287 100644 --- a/app/frontend/templates/machines/index.html +++ b/app/frontend/templates/machines/index.html @@ -20,7 +20,7 @@ -
-
-
-
- - -
-
-
- - {{ 'app.public.machines_list.new_availability' }} - -
-
- - -
-
-
- -
-
-
-
-

{{machine.name}}

-
-
- -
-
-
- - -
-
-
-
- - -
-
-
- -
-
-
- + +
diff --git a/config/locales/app.public.en.yml b/config/locales/app.public.en.yml index facd47981..ff82a9fa8 100644 --- a/config/locales/app.public.en.yml +++ b/config/locales/app.public.en.yml @@ -213,6 +213,9 @@ en: status_enabled: "Enabled" status_disabled: "Disabled" status_all: "All" + machine_card: + book: "Book" + consult: "Consult" #details of a machine machines_show: book_this_machine: "Book this machine" From de3ab3b6d04e1b39dfbea831a226cc259deb825e Mon Sep 17 00:00:00 2001 From: Sylvain Date: Thu, 17 Jun 2021 09:08:15 +0200 Subject: [PATCH 07/57] organize sass files --- app/frontend/src/stylesheets/application.scss | 50 +++++++++---------- .../modules/{ => base}/fab-alert.scss | 0 .../modules/{ => base}/fab-button.scss | 0 .../modules/{ => base}/fab-input.scss | 0 .../modules/{ => base}/fab-modal.scss | 0 .../modules/{ => base}/labelled-input.scss | 0 .../payment-schedule-dashboard.scss | 0 .../payment-schedule-summary.scss | 0 .../payment-schedules-list.scss | 0 .../payment-schedules-table.scss | 0 .../modules/{ => payment}/payment-modal.scss | 0 .../payzen}/payzen-keys-form.scss | 0 .../{ => payment/payzen}/payzen-modal.scss | 0 .../{ => payment/payzen}/payzen-settings.scss | 0 .../payzen}/payzen-update-card-modal.scss | 0 .../{ => payment/stripe}/stripe-confirm.scss | 0 .../stripe}/stripe-keys-form.scss | 0 .../{ => payment/stripe}/stripe-modal.scss | 0 .../stripe}/stripe-update-card-modal.scss | 0 .../create-plan-category.scss | 0 .../delete-plan-category.scss | 0 .../edit-plan-category.scss | 0 .../plan-categories-list.scss | 0 .../modules/{ => plans}/plan-card.scss | 0 .../modules/{ => plans}/plans-filter.scss | 0 .../modules/{ => plans}/plans-list.scss | 0 26 files changed, 25 insertions(+), 25 deletions(-) rename app/frontend/src/stylesheets/modules/{ => base}/fab-alert.scss (100%) rename app/frontend/src/stylesheets/modules/{ => base}/fab-button.scss (100%) rename app/frontend/src/stylesheets/modules/{ => base}/fab-input.scss (100%) rename app/frontend/src/stylesheets/modules/{ => base}/fab-modal.scss (100%) rename app/frontend/src/stylesheets/modules/{ => base}/labelled-input.scss (100%) rename app/frontend/src/stylesheets/modules/{ => payment-schedule}/payment-schedule-dashboard.scss (100%) rename app/frontend/src/stylesheets/modules/{ => payment-schedule}/payment-schedule-summary.scss (100%) rename app/frontend/src/stylesheets/modules/{ => payment-schedule}/payment-schedules-list.scss (100%) rename app/frontend/src/stylesheets/modules/{ => payment-schedule}/payment-schedules-table.scss (100%) rename app/frontend/src/stylesheets/modules/{ => payment}/payment-modal.scss (100%) rename app/frontend/src/stylesheets/modules/{ => payment/payzen}/payzen-keys-form.scss (100%) rename app/frontend/src/stylesheets/modules/{ => payment/payzen}/payzen-modal.scss (100%) rename app/frontend/src/stylesheets/modules/{ => payment/payzen}/payzen-settings.scss (100%) rename app/frontend/src/stylesheets/modules/{ => payment/payzen}/payzen-update-card-modal.scss (100%) rename app/frontend/src/stylesheets/modules/{ => payment/stripe}/stripe-confirm.scss (100%) rename app/frontend/src/stylesheets/modules/{ => payment/stripe}/stripe-keys-form.scss (100%) rename app/frontend/src/stylesheets/modules/{ => payment/stripe}/stripe-modal.scss (100%) rename app/frontend/src/stylesheets/modules/{ => payment/stripe}/stripe-update-card-modal.scss (100%) rename app/frontend/src/stylesheets/modules/{ => plan-categories}/create-plan-category.scss (100%) rename app/frontend/src/stylesheets/modules/{ => plan-categories}/delete-plan-category.scss (100%) rename app/frontend/src/stylesheets/modules/{ => plan-categories}/edit-plan-category.scss (100%) rename app/frontend/src/stylesheets/modules/{ => plan-categories}/plan-categories-list.scss (100%) rename app/frontend/src/stylesheets/modules/{ => plans}/plan-card.scss (100%) rename app/frontend/src/stylesheets/modules/{ => plans}/plans-filter.scss (100%) rename app/frontend/src/stylesheets/modules/{ => plans}/plans-list.scss (100%) diff --git a/app/frontend/src/stylesheets/application.scss b/app/frontend/src/stylesheets/application.scss index f4b3c828f..449a1f06f 100644 --- a/app/frontend/src/stylesheets/application.scss +++ b/app/frontend/src/stylesheets/application.scss @@ -21,35 +21,35 @@ @import "modules/signup"; @import "modules/stripe"; @import "modules/tour"; -@import "modules/fab-modal"; -@import "modules/fab-input"; -@import "modules/fab-button"; -@import "modules/fab-alert"; -@import "modules/payment-schedule-summary"; +@import "modules/base/fab-modal"; +@import "modules/base/fab-input"; +@import "modules/base/fab-button"; +@import "modules/base/fab-alert"; +@import "modules/base/labelled-input"; +@import "modules/payment-schedule/payment-schedule-summary"; @import "modules/wallet-info"; -@import "modules/stripe-modal"; -@import "modules/labelled-input"; @import "modules/document-filters"; -@import "modules/payment-schedules-table"; -@import "modules/payment-schedules-list"; -@import "modules/stripe-confirm"; -@import "modules/payment-schedule-dashboard"; -@import "modules/plans-list"; -@import "modules/plan-card"; +@import "modules/payment-schedule/payment-schedules-table"; +@import "modules/payment-schedule/payment-schedules-list"; +@import "modules/payment-schedule/payment-schedule-dashboard"; +@import "modules/plans/plans-list"; +@import "modules/plans/plan-card"; +@import "modules/plans/plans-filter"; @import "modules/event-themes"; @import "modules/select-gateway-modal"; -@import "modules/stripe-keys-form"; -@import "modules/payzen-keys-form"; -@import "modules/payzen-settings"; -@import "modules/payment-modal"; -@import "modules/payzen-modal"; -@import "modules/stripe-update-card-modal"; -@import "modules/payzen-update-card-modal"; -@import "modules/plan-categories-list"; -@import "modules/create-plan-category"; -@import "modules/edit-plan-category"; -@import "modules/delete-plan-category"; -@import "modules/plans-filter"; +@import "modules/payment/payment-modal"; +@import "modules/payment/stripe/stripe-keys-form"; +@import "modules/payment/stripe/stripe-confirm"; +@import "modules/payment/stripe/stripe-modal"; +@import "modules/payment/stripe/stripe-update-card-modal"; +@import "modules/payment/payzen/payzen-keys-form"; +@import "modules/payment/payzen/payzen-settings"; +@import "modules/payment/payzen/payzen-modal"; +@import "modules/payment/payzen/payzen-update-card-modal"; +@import "modules/plan-categories/plan-categories-list"; +@import "modules/plan-categories/create-plan-category"; +@import "modules/plan-categories/edit-plan-category"; +@import "modules/plan-categories/delete-plan-category"; @import "modules/machines/machine-card"; @import "modules/machines/machines-list"; diff --git a/app/frontend/src/stylesheets/modules/fab-alert.scss b/app/frontend/src/stylesheets/modules/base/fab-alert.scss similarity index 100% rename from app/frontend/src/stylesheets/modules/fab-alert.scss rename to app/frontend/src/stylesheets/modules/base/fab-alert.scss diff --git a/app/frontend/src/stylesheets/modules/fab-button.scss b/app/frontend/src/stylesheets/modules/base/fab-button.scss similarity index 100% rename from app/frontend/src/stylesheets/modules/fab-button.scss rename to app/frontend/src/stylesheets/modules/base/fab-button.scss diff --git a/app/frontend/src/stylesheets/modules/fab-input.scss b/app/frontend/src/stylesheets/modules/base/fab-input.scss similarity index 100% rename from app/frontend/src/stylesheets/modules/fab-input.scss rename to app/frontend/src/stylesheets/modules/base/fab-input.scss diff --git a/app/frontend/src/stylesheets/modules/fab-modal.scss b/app/frontend/src/stylesheets/modules/base/fab-modal.scss similarity index 100% rename from app/frontend/src/stylesheets/modules/fab-modal.scss rename to app/frontend/src/stylesheets/modules/base/fab-modal.scss diff --git a/app/frontend/src/stylesheets/modules/labelled-input.scss b/app/frontend/src/stylesheets/modules/base/labelled-input.scss similarity index 100% rename from app/frontend/src/stylesheets/modules/labelled-input.scss rename to app/frontend/src/stylesheets/modules/base/labelled-input.scss diff --git a/app/frontend/src/stylesheets/modules/payment-schedule-dashboard.scss b/app/frontend/src/stylesheets/modules/payment-schedule/payment-schedule-dashboard.scss similarity index 100% rename from app/frontend/src/stylesheets/modules/payment-schedule-dashboard.scss rename to app/frontend/src/stylesheets/modules/payment-schedule/payment-schedule-dashboard.scss diff --git a/app/frontend/src/stylesheets/modules/payment-schedule-summary.scss b/app/frontend/src/stylesheets/modules/payment-schedule/payment-schedule-summary.scss similarity index 100% rename from app/frontend/src/stylesheets/modules/payment-schedule-summary.scss rename to app/frontend/src/stylesheets/modules/payment-schedule/payment-schedule-summary.scss diff --git a/app/frontend/src/stylesheets/modules/payment-schedules-list.scss b/app/frontend/src/stylesheets/modules/payment-schedule/payment-schedules-list.scss similarity index 100% rename from app/frontend/src/stylesheets/modules/payment-schedules-list.scss rename to app/frontend/src/stylesheets/modules/payment-schedule/payment-schedules-list.scss diff --git a/app/frontend/src/stylesheets/modules/payment-schedules-table.scss b/app/frontend/src/stylesheets/modules/payment-schedule/payment-schedules-table.scss similarity index 100% rename from app/frontend/src/stylesheets/modules/payment-schedules-table.scss rename to app/frontend/src/stylesheets/modules/payment-schedule/payment-schedules-table.scss diff --git a/app/frontend/src/stylesheets/modules/payment-modal.scss b/app/frontend/src/stylesheets/modules/payment/payment-modal.scss similarity index 100% rename from app/frontend/src/stylesheets/modules/payment-modal.scss rename to app/frontend/src/stylesheets/modules/payment/payment-modal.scss diff --git a/app/frontend/src/stylesheets/modules/payzen-keys-form.scss b/app/frontend/src/stylesheets/modules/payment/payzen/payzen-keys-form.scss similarity index 100% rename from app/frontend/src/stylesheets/modules/payzen-keys-form.scss rename to app/frontend/src/stylesheets/modules/payment/payzen/payzen-keys-form.scss diff --git a/app/frontend/src/stylesheets/modules/payzen-modal.scss b/app/frontend/src/stylesheets/modules/payment/payzen/payzen-modal.scss similarity index 100% rename from app/frontend/src/stylesheets/modules/payzen-modal.scss rename to app/frontend/src/stylesheets/modules/payment/payzen/payzen-modal.scss diff --git a/app/frontend/src/stylesheets/modules/payzen-settings.scss b/app/frontend/src/stylesheets/modules/payment/payzen/payzen-settings.scss similarity index 100% rename from app/frontend/src/stylesheets/modules/payzen-settings.scss rename to app/frontend/src/stylesheets/modules/payment/payzen/payzen-settings.scss diff --git a/app/frontend/src/stylesheets/modules/payzen-update-card-modal.scss b/app/frontend/src/stylesheets/modules/payment/payzen/payzen-update-card-modal.scss similarity index 100% rename from app/frontend/src/stylesheets/modules/payzen-update-card-modal.scss rename to app/frontend/src/stylesheets/modules/payment/payzen/payzen-update-card-modal.scss diff --git a/app/frontend/src/stylesheets/modules/stripe-confirm.scss b/app/frontend/src/stylesheets/modules/payment/stripe/stripe-confirm.scss similarity index 100% rename from app/frontend/src/stylesheets/modules/stripe-confirm.scss rename to app/frontend/src/stylesheets/modules/payment/stripe/stripe-confirm.scss diff --git a/app/frontend/src/stylesheets/modules/stripe-keys-form.scss b/app/frontend/src/stylesheets/modules/payment/stripe/stripe-keys-form.scss similarity index 100% rename from app/frontend/src/stylesheets/modules/stripe-keys-form.scss rename to app/frontend/src/stylesheets/modules/payment/stripe/stripe-keys-form.scss diff --git a/app/frontend/src/stylesheets/modules/stripe-modal.scss b/app/frontend/src/stylesheets/modules/payment/stripe/stripe-modal.scss similarity index 100% rename from app/frontend/src/stylesheets/modules/stripe-modal.scss rename to app/frontend/src/stylesheets/modules/payment/stripe/stripe-modal.scss diff --git a/app/frontend/src/stylesheets/modules/stripe-update-card-modal.scss b/app/frontend/src/stylesheets/modules/payment/stripe/stripe-update-card-modal.scss similarity index 100% rename from app/frontend/src/stylesheets/modules/stripe-update-card-modal.scss rename to app/frontend/src/stylesheets/modules/payment/stripe/stripe-update-card-modal.scss diff --git a/app/frontend/src/stylesheets/modules/create-plan-category.scss b/app/frontend/src/stylesheets/modules/plan-categories/create-plan-category.scss similarity index 100% rename from app/frontend/src/stylesheets/modules/create-plan-category.scss rename to app/frontend/src/stylesheets/modules/plan-categories/create-plan-category.scss diff --git a/app/frontend/src/stylesheets/modules/delete-plan-category.scss b/app/frontend/src/stylesheets/modules/plan-categories/delete-plan-category.scss similarity index 100% rename from app/frontend/src/stylesheets/modules/delete-plan-category.scss rename to app/frontend/src/stylesheets/modules/plan-categories/delete-plan-category.scss diff --git a/app/frontend/src/stylesheets/modules/edit-plan-category.scss b/app/frontend/src/stylesheets/modules/plan-categories/edit-plan-category.scss similarity index 100% rename from app/frontend/src/stylesheets/modules/edit-plan-category.scss rename to app/frontend/src/stylesheets/modules/plan-categories/edit-plan-category.scss diff --git a/app/frontend/src/stylesheets/modules/plan-categories-list.scss b/app/frontend/src/stylesheets/modules/plan-categories/plan-categories-list.scss similarity index 100% rename from app/frontend/src/stylesheets/modules/plan-categories-list.scss rename to app/frontend/src/stylesheets/modules/plan-categories/plan-categories-list.scss diff --git a/app/frontend/src/stylesheets/modules/plan-card.scss b/app/frontend/src/stylesheets/modules/plans/plan-card.scss similarity index 100% rename from app/frontend/src/stylesheets/modules/plan-card.scss rename to app/frontend/src/stylesheets/modules/plans/plan-card.scss diff --git a/app/frontend/src/stylesheets/modules/plans-filter.scss b/app/frontend/src/stylesheets/modules/plans/plans-filter.scss similarity index 100% rename from app/frontend/src/stylesheets/modules/plans-filter.scss rename to app/frontend/src/stylesheets/modules/plans/plans-filter.scss diff --git a/app/frontend/src/stylesheets/modules/plans-list.scss b/app/frontend/src/stylesheets/modules/plans/plans-list.scss similarity index 100% rename from app/frontend/src/stylesheets/modules/plans-list.scss rename to app/frontend/src/stylesheets/modules/plans/plans-list.scss From 80d206fc99f4cae8e0eed65234c89f8a0fe22be5 Mon Sep 17 00:00:00 2001 From: Sylvain Date: Thu, 17 Jun 2021 09:48:29 +0200 Subject: [PATCH 08/57] responsively styled the machines list --- .../components/machines/machines-list.tsx | 2 +- .../stylesheets/modules/machines/machine-card.scss | 14 +++++++++++++- app/themes/casemate/style.scss.erb | 8 ++++++++ 3 files changed, 22 insertions(+), 2 deletions(-) diff --git a/app/frontend/src/javascript/components/machines/machines-list.tsx b/app/frontend/src/javascript/components/machines/machines-list.tsx index 4a50630d8..3de39f41f 100644 --- a/app/frontend/src/javascript/components/machines/machines-list.tsx +++ b/app/frontend/src/javascript/components/machines/machines-list.tsx @@ -29,7 +29,7 @@ const MachinesList: React.FC = ({ onError, onShowMachine, onR return (
{machines && machines.map(machine => { - return + return })}
); diff --git a/app/frontend/src/stylesheets/modules/machines/machine-card.scss b/app/frontend/src/stylesheets/modules/machines/machine-card.scss index 8f271b0fd..94c14745e 100644 --- a/app/frontend/src/stylesheets/modules/machines/machine-card.scss +++ b/app/frontend/src/stylesheets/modules/machines/machine-card.scss @@ -4,7 +4,19 @@ border-radius: 6px; margin: 0 15px 30px; width: 30%; - min-width: 300px; + min-width: 263px; + + @media screen and (max-width: 1219px) { + width: 45%; + min-width: 195px; + margin: 0 auto 30px; + } + + @media screen and (max-width: 674px) { + width: 95%; + max-width: 400px; + margin: 0 auto 30px; + } .machine-picture { height: 250px; diff --git a/app/themes/casemate/style.scss.erb b/app/themes/casemate/style.scss.erb index 65cd8b490..02363133a 100644 --- a/app/themes/casemate/style.scss.erb +++ b/app/themes/casemate/style.scss.erb @@ -387,3 +387,11 @@ section#cookies-modal div.cookies-consent .cookies-actions button.accept { color: $secondary-text-color; } } + +.machine-card { + .machine-actions { + button { + color: $secondary; + } + } +} From 4aa3fdff0eba05cb8869dcaad4b754f22579e4c7 Mon Sep 17 00:00:00 2001 From: Sylvain Date: Thu, 17 Jun 2021 10:25:13 +0200 Subject: [PATCH 09/57] filter machines by status --- .../components/machines/machine-card.tsx | 22 +++++--- .../components/machines/machines-filters.tsx | 50 +++++++++++++++++++ .../components/machines/machines-list.tsx | 32 ++++++++++-- app/frontend/src/stylesheets/application.scss | 1 + .../modules/machines/machines-filters.scss | 31 ++++++++++++ .../modules/machines/machines-list.scss | 6 ++- config/locales/app.public.en.yml | 2 + 7 files changed, 131 insertions(+), 13 deletions(-) create mode 100644 app/frontend/src/javascript/components/machines/machines-filters.tsx create mode 100644 app/frontend/src/stylesheets/modules/machines/machines-filters.scss diff --git a/app/frontend/src/javascript/components/machines/machine-card.tsx b/app/frontend/src/javascript/components/machines/machine-card.tsx index c81b4f72f..e10b6d42d 100644 --- a/app/frontend/src/javascript/components/machines/machine-card.tsx +++ b/app/frontend/src/javascript/components/machines/machine-card.tsx @@ -16,6 +16,21 @@ interface MachineCardProps { const MachineCardComponent: React.FC = ({ machine, onShowMachine, onReserveMachine }) => { const { t } = useTranslation('public'); + /** + * Callback triggered when the user clicks on the 'reserve' button. + * We handle the training verification process here, before redirecting the user to the reservation calendar. + */ + const handleReserveMachine = (): void => { + onReserveMachine(machine); + } + + /** + * Callback triggered when the user clicks on the 'view' button + */ + const handleShowMachine = (): void => { + onShowMachine(machine); + } + const machinePicture = (): ReactNode => { if (!machine.machine_image) { return ( @@ -33,13 +48,6 @@ const MachineCardComponent: React.FC = ({ machine, onShowMachi ) } - const handleReserveMachine = (): void => { - onReserveMachine(machine); - } - - const handleShowMachine = (): void => { - onShowMachine(machine); - } return (
{machinePicture()} diff --git a/app/frontend/src/javascript/components/machines/machines-filters.tsx b/app/frontend/src/javascript/components/machines/machines-filters.tsx new file mode 100644 index 000000000..776d5a1a8 --- /dev/null +++ b/app/frontend/src/javascript/components/machines/machines-filters.tsx @@ -0,0 +1,50 @@ +import React from 'react'; +import Select from 'react-select'; +import { useTranslation } from 'react-i18next'; + +interface MachinesFiltersProps { + onStatusSelected: (enabled: boolean) => void, +} + +/** + * Option format, expected by react-select + * @see https://github.com/JedWatson/react-select + */ +type selectOption = { value: boolean, label: string }; + +export const MachinesFilters: React.FC = ({ onStatusSelected }) => { + const { t } = useTranslation('public'); + + const defaultValue = { value: true, label: t('app.public.machines_filters.status_enabled') }; + + /** + * Provides boolean options in the react-select format (yes/no/all) + */ + const buildBooleanOptions = (): Array => { + return [ + defaultValue, + { value: false, label: t('app.public.machines_filters.status_disabled') }, + { value: null, label: t('app.public.machines_filters.status_all') }, + ] + } + + /** + * Callback triggered when the user selects a machine status in the dropdown list + */ + const handleStatusSelected = (option: selectOption): void => { + onStatusSelected(option.value); + } + + return ( +
+
+ + , @@ -12,19 +13,27 @@ interface ConfigurePacksButtonProps { */ export const ConfigurePacksButton: React.FC = ({ packs, onError }) => { const [showList, setShowList] = useState(false); + const [addPackModal, setAddPackModal] = useState(false); const toggleShowList = (): void => { setShowList(!showList); } + + const toggleAddPackModal = (): void => { + setAddPackModal(!addPackModal); + } + const handleAddPack = (): void => { - //TODO, open a modal to add a new pack + toggleAddPackModal(); } return (
+ {packs && showList &&
{packs.map(p =>
{p.minutes / 60}h - {p.amount}
)}
} + NEW PACK
); } diff --git a/app/frontend/src/javascript/components/pricing/editable-price.tsx b/app/frontend/src/javascript/components/pricing/editable-price.tsx index d506972cc..37b3ef5bd 100644 --- a/app/frontend/src/javascript/components/pricing/editable-price.tsx +++ b/app/frontend/src/javascript/components/pricing/editable-price.tsx @@ -17,7 +17,7 @@ interface EditablePriceProps { */ export const EditablePrice: React.FC = ({ price, onSave }) => { const [edit, setEdit] = useState(false); - const [tempPrice, setTempPrice] = useState(price.amount); + const [tempPrice, setTempPrice] = useState(`${price.amount}`); /** * Return the formatted localized amount for the price (eg. 20.5 => "20,50 €") @@ -31,14 +31,15 @@ export const EditablePrice: React.FC = ({ price, onSave }) = */ const handleValidateEdit = (): void => { const newPrice: Price = Object.assign({}, price); - newPrice.amount = tempPrice; + newPrice.amount = parseFloat(tempPrice); onSave(newPrice); + toggleEdit(); } /** * Enable or disable the edit mode */ - const toggleEdit= (): void => { + const toggleEdit = (): void => { setEdit(!edit); } @@ -46,7 +47,7 @@ export const EditablePrice: React.FC = ({ price, onSave }) = {!edit && {formatPrice()}} {edit && - + } className="approve-button" onClick={handleValidateEdit} /> } className="cancel-button" onClick={toggleEdit} /> } diff --git a/app/frontend/src/javascript/components/pricing/machines-pricing.tsx b/app/frontend/src/javascript/components/pricing/machines-pricing.tsx index 17ad2b560..950fded62 100644 --- a/app/frontend/src/javascript/components/pricing/machines-pricing.tsx +++ b/app/frontend/src/javascript/components/pricing/machines-pricing.tsx @@ -16,6 +16,7 @@ import PriceAPI from '../../api/price'; import { Price } from '../../models/price'; import PrepaidPackAPI from '../../api/prepaid-pack'; import { PrepaidPack } from '../../models/prepaid-pack'; +import { useImmer } from 'use-immer'; declare var Fablab: IFablab; declare var Application: IApplication; @@ -33,7 +34,7 @@ const MachinesPricing: React.FC = ({ onError, onSuccess }) const [machines, setMachines] = useState>(null); const [groups, setGroups] = useState>(null); - const [prices, setPrices] = useState>(null); + const [prices, updatePrices] = useImmer>(null); const [packs, setPacks] = useState>(null); // retrieve the initial data @@ -41,11 +42,11 @@ const MachinesPricing: React.FC = ({ onError, onSuccess }) MachineAPI.index([{ key: 'disabled', value: false }]) .then(data => setMachines(data)) .catch(error => onError(error)); - GroupAPI.index([{ key: 'disabled', value: false }]) + GroupAPI.index({ disabled: false , admins: false }) .then(data => setGroups(data)) .catch(error => onError(error)); PriceAPI.index([{ key: 'priceable_type', value: 'Machine'}, { key: 'plan_id', value: null }]) - .then(data => setPrices(data)) + .then(data => updatePrices(data)) .catch(error => onError(error)); PrepaidPackAPI.index() .then(data => setPacks(data)) @@ -80,17 +81,31 @@ const MachinesPricing: React.FC = ({ onError, onSuccess }) } }; + /** + * Update the given price in the internal state + */ + const updatePrice = (price: Price): void => { + updatePrices(draft => { + const index = draft.findIndex(p => p.id === price.id); + draft[index] = price; + return draft; + }); + } + /** * Callback triggered when the user has confirmed to update a price */ const handleUpdatePrice = (price: Price): void => { PriceAPI.update(price) - .then(() => onSuccess(t('app.admin.machines_pricing.price_updated'))) + .then(() => { + onSuccess(t('app.admin.machines_pricing.price_updated')); + updatePrice(price); + }) .catch(error => onError(error)) } return ( -
+

diff --git a/app/frontend/src/javascript/models/group.ts b/app/frontend/src/javascript/models/group.ts index 0c658e943..3eb36bd2f 100644 --- a/app/frontend/src/javascript/models/group.ts +++ b/app/frontend/src/javascript/models/group.ts @@ -1,6 +1,6 @@ export interface GroupIndexFilter { - key: 'disabled', - value: boolean, + disabled?: boolean, + admins?: boolean, } export interface Group { diff --git a/app/frontend/src/stylesheets/application.scss b/app/frontend/src/stylesheets/application.scss index 09bc8796f..4844eee5c 100644 --- a/app/frontend/src/stylesheets/application.scss +++ b/app/frontend/src/stylesheets/application.scss @@ -55,5 +55,7 @@ @import "modules/machines/machines-filters"; @import "modules/machines/required-training-modal"; @import "modules/user/avatar"; +@import "modules/pricing/machines-pricing"; +@import "modules/pricing/editable-price"; @import "app.responsive"; diff --git a/app/frontend/src/stylesheets/modules/pricing/editable-price.scss b/app/frontend/src/stylesheets/modules/pricing/editable-price.scss new file mode 100644 index 000000000..292ba439f --- /dev/null +++ b/app/frontend/src/stylesheets/modules/pricing/editable-price.scss @@ -0,0 +1,13 @@ +.editable-price { + .display-price { + text-decoration: none; + color: #428bca; + border-bottom: dashed 1px #428bca; + + &:hover { + text-decoration: none; + color: #2a6496; + border-bottom-color: #2a6496; + } + } +} diff --git a/app/frontend/src/stylesheets/modules/pricing/machines-pricing.scss b/app/frontend/src/stylesheets/modules/pricing/machines-pricing.scss new file mode 100644 index 000000000..99c04a00b --- /dev/null +++ b/app/frontend/src/stylesheets/modules/pricing/machines-pricing.scss @@ -0,0 +1,31 @@ +.machines-pricing { + .fab-alert { + margin: 15px 0; + } + table { + overflow-y: scroll; + thead > tr > th:first-child { + width: 20%; + } + + thead > tr > th.group-name { + width: 20%; + text-transform: uppercase; + font-size: 1.4rem; + } + + thead > tr > th { + vertical-align: bottom; + border-bottom: 2px solid #ddd; + padding: 8px; + line-height: 1.5; + } + + tbody > tr > td { + padding: 8px; + line-height: 1.5; + vertical-align: top; + border-top: 1px solid #ddd; + } + } +} diff --git a/app/services/group_service.rb b/app/services/group_service.rb index 94c642579..3b0e6e482 100644 --- a/app/services/group_service.rb +++ b/app/services/group_service.rb @@ -14,6 +14,8 @@ class GroupService groups = groups.where(disabled: state) end + groups = groups.where.not(slug: 'admins') if filters[:admins] == 'false' + groups end end From f81e0910c2a2121fdc895afd6550b68f3a311003 Mon Sep 17 00:00:00 2001 From: Sylvain Date: Wed, 23 Jun 2021 11:33:42 +0200 Subject: [PATCH 23/57] packs popover --- .../pricing/configure-packs-button.tsx | 23 ++++-- app/frontend/src/stylesheets/application.scss | 1 + .../pricing/configure-packs-button.scss | 82 +++++++++++++++++++ config/locales/app.admin.en.yml | 3 + 4 files changed, 104 insertions(+), 5 deletions(-) create mode 100644 app/frontend/src/stylesheets/modules/pricing/configure-packs-button.scss diff --git a/app/frontend/src/javascript/components/pricing/configure-packs-button.tsx b/app/frontend/src/javascript/components/pricing/configure-packs-button.tsx index ed3e17017..f0375f3d6 100644 --- a/app/frontend/src/javascript/components/pricing/configure-packs-button.tsx +++ b/app/frontend/src/javascript/components/pricing/configure-packs-button.tsx @@ -1,6 +1,7 @@ import React, { useState } from 'react'; import { PrepaidPack } from '../../models/prepaid-pack'; import { FabModal } from '../base/fab-modal'; +import { useTranslation } from 'react-i18next'; interface ConfigurePacksButtonProps { packs: Array, @@ -12,6 +13,7 @@ interface ConfigurePacksButtonProps { * When clicked, it opens a modal dialog to configure (add/delete/edit/remove) prepaid-packs. */ export const ConfigurePacksButton: React.FC = ({ packs, onError }) => { + const { t } = useTranslation('admin'); const [showList, setShowList] = useState(false); const [addPackModal, setAddPackModal] = useState(false); @@ -28,12 +30,23 @@ export const ConfigurePacksButton: React.FC = ({ pack } return ( -
- - {packs && showList &&
- {packs.map(p =>
{p.minutes / 60}h - {p.amount}
)} +
+ + {showList &&
+
+

{t('app.admin.configure_packs_button.packs')}

+ +
+
+
    + {packs?.map(p =>
  • {p.minutes / 60}h - {p.amount}
    • )} +
+ {packs?.length === 0 && {t('app.admin.configure_packs_button.no_packs')}} +
} - NEW PACK + NEW PACK
); } diff --git a/app/frontend/src/stylesheets/application.scss b/app/frontend/src/stylesheets/application.scss index 4844eee5c..716b49fc5 100644 --- a/app/frontend/src/stylesheets/application.scss +++ b/app/frontend/src/stylesheets/application.scss @@ -57,5 +57,6 @@ @import "modules/user/avatar"; @import "modules/pricing/machines-pricing"; @import "modules/pricing/editable-price"; +@import "modules/pricing/configure-packs-button"; @import "app.responsive"; diff --git a/app/frontend/src/stylesheets/modules/pricing/configure-packs-button.scss b/app/frontend/src/stylesheets/modules/pricing/configure-packs-button.scss new file mode 100644 index 000000000..28de9dc5a --- /dev/null +++ b/app/frontend/src/stylesheets/modules/pricing/configure-packs-button.scss @@ -0,0 +1,82 @@ +.configure-packs-button { + display: inline-block; + margin-left: 6px; + position: relative; + + .packs-button { + border: 1px solid #d0cccc; + border-radius: 50%; + cursor: pointer; + width: 30px; + height: 30px; + display: inline-block; + padding: 2px 6px; + box-shadow: 0 1px 1px 0 #abaaaa; + + &:hover { + background-color: #b9b9b9; + color: white; + } + } + + .packs-popover { + & { + position: absolute; + width: 276px; + border: 1px solid rgba(0,0,0,.2); + border-radius: .3rem; + top: 35px; + left: -125px; + z-index: 1; + } + + &::before { + content: ""; + background-color: transparent; + position: absolute; + left: 132px; + top: -7px; + height: 7px; + width: 12px; + border-left: 7px solid transparent; + border-right: 7px solid transparent; + border-bottom: 7px solid #ccc; + } + &::after { + content: ""; + background-color: transparent; + position: absolute; + left: 133px; + top: -6px; + height: 6px; + width: 10px; + border-left: 6px solid transparent; + border-right: 6px solid transparent; + border-bottom: 6px solid #f0f0f0; + } + .popover-title { + padding: .5rem 1rem; + margin-bottom: 0; + font-size: 1rem; + background-color: #f0f0f0; + border-bottom: 1px solid rgba(0,0,0,.2); + border-top-left-radius: calc(.3rem - 1px); + border-top-right-radius: calc(.3rem - 1px); + + & > h3 { + margin: 2px; + } + + & > .add-pack-button { + position: absolute; + right: 5px; + top: 10px; + } + } + .popover-content { + padding: 1rem 1rem; + color: #212529; + background-color: white; + } + } +} diff --git a/config/locales/app.admin.en.yml b/config/locales/app.admin.en.yml index f3b2700d8..e1c854a42 100644 --- a/config/locales/app.admin.en.yml +++ b/config/locales/app.admin.en.yml @@ -374,6 +374,9 @@ en: you_can_override: "You can override this duration for each availability you create in the agenda. The price will then be adjusted accordingly." machines: "Machines" price_updated: "Price successfully updated" + configure_packs_button: + packs: "Prepaid packs" + no_packs: "No packs for now" #ajouter un code promotionnel coupons_new: add_a_coupon: "Add a coupon" From 1f8fd47317fa33cbc65461c7a6410579a37164d4 Mon Sep 17 00:00:00 2001 From: Sylvain Date: Wed, 23 Jun 2021 17:00:15 +0200 Subject: [PATCH 24/57] pack creation and listing --- app/frontend/src/javascript/api/group.ts | 2 +- app/frontend/src/javascript/api/machine.ts | 8 +- .../src/javascript/api/prepaid-pack.ts | 8 +- app/frontend/src/javascript/api/price.ts | 6 +- .../javascript/components/base/fab-input.tsx | 8 +- .../javascript/components/base/fab-modal.tsx | 13 +- .../components/base/fab-popover.tsx | 32 +++++ .../payment-schedules-table.tsx | 2 +- .../pricing/configure-packs-button.tsx | 114 ++++++++++++---- .../components/pricing/machines-pricing.tsx | 24 ++-- .../components/pricing/new-pack-modal.tsx | 58 ++++++++ .../components/pricing/pack-form.tsx | 124 ++++++++++++++++++ app/frontend/src/javascript/models/machine.ts | 3 +- .../src/javascript/models/prepaid-pack.ts | 7 +- app/frontend/src/javascript/models/price.ts | 6 +- app/frontend/src/stylesheets/application.scss | 2 + .../stylesheets/modules/base/fab-popover.scss | 54 ++++++++ .../pricing/configure-packs-button.scss | 87 +++++------- .../modules/pricing/pack-form.scss | 10 ++ config/locales/app.admin.en.yml | 16 +++ 20 files changed, 476 insertions(+), 108 deletions(-) create mode 100644 app/frontend/src/javascript/components/base/fab-popover.tsx create mode 100644 app/frontend/src/javascript/components/pricing/new-pack-modal.tsx create mode 100644 app/frontend/src/javascript/components/pricing/pack-form.tsx create mode 100644 app/frontend/src/stylesheets/modules/base/fab-popover.scss create mode 100644 app/frontend/src/stylesheets/modules/pricing/pack-form.scss diff --git a/app/frontend/src/javascript/api/group.ts b/app/frontend/src/javascript/api/group.ts index 65c99df8b..b7e827895 100644 --- a/app/frontend/src/javascript/api/group.ts +++ b/app/frontend/src/javascript/api/group.ts @@ -4,7 +4,7 @@ import { Group, GroupIndexFilter } from '../models/group'; export default class GroupAPI { static async index (filters?: GroupIndexFilter): Promise> { - const res: AxiosResponse> = await apiClient.get(`/api/groups${GroupAPI.filtersToQuery(filters)}`); + const res: AxiosResponse> = await apiClient.get(`/api/groups${this.filtersToQuery(filters)}`); return res?.data; } diff --git a/app/frontend/src/javascript/api/machine.ts b/app/frontend/src/javascript/api/machine.ts index 47f4f3057..b1a338c43 100644 --- a/app/frontend/src/javascript/api/machine.ts +++ b/app/frontend/src/javascript/api/machine.ts @@ -3,8 +3,8 @@ import { AxiosResponse } from 'axios'; import { Machine, MachineIndexFilter } from '../models/machine'; export default class MachineAPI { - static async index (filters?: Array): Promise> { - const res: AxiosResponse> = await apiClient.get(`/api/machines${MachineAPI.filtersToQuery(filters)}`); + static async index (filters?: MachineIndexFilter): Promise> { + const res: AxiosResponse> = await apiClient.get(`/api/machines${this.filtersToQuery(filters)}`); return res?.data; } @@ -13,10 +13,10 @@ export default class MachineAPI { return res?.data; } - private static filtersToQuery(filters?: Array): string { + private static filtersToQuery(filters?: MachineIndexFilter): string { if (!filters) return ''; - return '?' + filters.map(f => `${f.key}=${f.value}`).join('&'); + return '?' + Object.entries(filters).map(f => `${f[0]}=${f[1]}`).join('&'); } } diff --git a/app/frontend/src/javascript/api/prepaid-pack.ts b/app/frontend/src/javascript/api/prepaid-pack.ts index f48463f65..31ffa969a 100644 --- a/app/frontend/src/javascript/api/prepaid-pack.ts +++ b/app/frontend/src/javascript/api/prepaid-pack.ts @@ -3,8 +3,8 @@ import { AxiosResponse } from 'axios'; import { PackIndexFilter, PrepaidPack } from '../models/prepaid-pack'; export default class PrepaidPackAPI { - static async index (filters?: Array): Promise> { - const res: AxiosResponse> = await apiClient.get(`/api/prepaid_packs${PrepaidPackAPI.filtersToQuery(filters)}`); + static async index (filters?: PackIndexFilter): Promise> { + const res: AxiosResponse> = await apiClient.get(`/api/prepaid_packs${this.filtersToQuery(filters)}`); return res?.data; } @@ -28,10 +28,10 @@ export default class PrepaidPackAPI { return res?.data; } - private static filtersToQuery(filters?: Array): string { + private static filtersToQuery(filters?: PackIndexFilter): string { if (!filters) return ''; - return '?' + filters.map(f => `${f.key}=${f.value}`).join('&'); + return '?' + Object.entries(filters).map(f => `${f[0]}=${f[1]}`).join('&'); } } diff --git a/app/frontend/src/javascript/api/price.ts b/app/frontend/src/javascript/api/price.ts index 475ac1ad0..dd7e6cfab 100644 --- a/app/frontend/src/javascript/api/price.ts +++ b/app/frontend/src/javascript/api/price.ts @@ -9,7 +9,7 @@ export default class PriceAPI { return res?.data; } - static async index (filters?: Array): Promise> { + static async index (filters?: PriceIndexFilter): Promise> { const res: AxiosResponse = await apiClient.get(`/api/prices${this.filtersToQuery(filters)}`); return res?.data; } @@ -19,10 +19,10 @@ export default class PriceAPI { return res?.data; } - private static filtersToQuery(filters?: Array): string { + private static filtersToQuery(filters?: PriceIndexFilter): string { if (!filters) return ''; - return '?' + filters.map(f => `${f.key}=${f.value}`).join('&'); + return '?' + Object.entries(filters).map(f => `${f[0]}=${f[1]}`).join('&'); } } diff --git a/app/frontend/src/javascript/components/base/fab-input.tsx b/app/frontend/src/javascript/components/base/fab-input.tsx index 48bf60477..515e0c862 100644 --- a/app/frontend/src/javascript/components/base/fab-input.tsx +++ b/app/frontend/src/javascript/components/base/fab-input.tsx @@ -3,7 +3,7 @@ import { debounce as _debounce } from 'lodash'; interface FabInputProps { id: string, - onChange?: (value: any, validity?: ValidityState) => void, + onChange?: (value: string, validity?: ValidityState) => void, defaultValue: any, icon?: ReactNode, addOn?: ReactNode, @@ -19,12 +19,14 @@ interface FabInputProps { error?: string, type?: 'text' | 'date' | 'password' | 'url' | 'time' | 'tel' | 'search' | 'number' | 'month' | 'email' | 'datetime-local' | 'week', step?: number | 'any', + min?: number, + max?: number, } /** * This component is a template for an input component that wraps the application style */ -export const FabInput: React.FC = ({ id, onChange, defaultValue, icon, className, disabled, type, required, debounce, addOn, addOnClassName, readOnly, maxLength, pattern, placeholder, error, step }) => { +export const FabInput: React.FC = ({ id, onChange, defaultValue, icon, className, disabled, type, required, debounce, addOn, addOnClassName, readOnly, maxLength, pattern, placeholder, error, step, min, max }) => { const [inputValue, setInputValue] = useState(defaultValue); /** @@ -88,6 +90,8 @@ export const FabInput: React.FC = ({ id, onChange, defaultValue, void, preventConfirm?: boolean, onCreation?: () => void, + onConfirmSendFormId?: string, } /** * This component is a template for a modal dialog that wraps the application style */ -export const FabModal: React.FC = ({ title, isOpen, toggleModal, children, confirmButton, className, width = 'sm', closeButton, customHeader, customFooter, onConfirm, preventConfirm, onCreation }) => { +export const FabModal: React.FC = ({ title, isOpen, toggleModal, children, confirmButton, className, width = 'sm', closeButton, customHeader, customFooter, onConfirm, preventConfirm, onCreation, onConfirmSendFormId }) => { const { t } = useTranslation('shared'); const [blackLogo, setBlackLogo] = useState(null); @@ -55,6 +56,13 @@ export const FabModal: React.FC = ({ title, isOpen, toggleModal, return confirmButton !== undefined; } + /** + * Check if the behavior of the confirm button is to send a form, using the provided ID + */ + const confirmationSendForm = (): boolean => { + return onConfirmSendFormId !== undefined; + } + /** * Should we display the close button? */ @@ -96,7 +104,8 @@ export const FabModal: React.FC = ({ title, isOpen, toggleModal,
{hasCloseButton() &&{t('app.shared.buttons.close')}} - {hasConfirmButton() && {confirmButton}} + {hasConfirmButton() && !confirmationSendForm() && {confirmButton}} + {hasConfirmButton() && confirmationSendForm() && {confirmButton}} {hasCustomFooter() && customFooter}
diff --git a/app/frontend/src/javascript/components/base/fab-popover.tsx b/app/frontend/src/javascript/components/base/fab-popover.tsx new file mode 100644 index 000000000..3438fa746 --- /dev/null +++ b/app/frontend/src/javascript/components/base/fab-popover.tsx @@ -0,0 +1,32 @@ +import React, { ReactNode } from 'react'; + +interface FabPopoverProps { + title: string, + className?: string, + headerButton?: ReactNode, +} + +/** + * This component is a template for a popovers (bottom) that wraps the application style + */ +export const FabPopover: React.FC = ({ title, className, headerButton, children }) => { + + /** + * Check if the header button should be present + */ + const hasHeaderButton = (): boolean => { + return !!headerButton; + } + + return ( +
+
+

{title}

+ {hasHeaderButton() && headerButton} +
+
+ {children} +
+
+ ); +} diff --git a/app/frontend/src/javascript/components/payment-schedule/payment-schedules-table.tsx b/app/frontend/src/javascript/components/payment-schedule/payment-schedules-table.tsx index d5d176d32..84e294af2 100644 --- a/app/frontend/src/javascript/components/payment-schedule/payment-schedules-table.tsx +++ b/app/frontend/src/javascript/components/payment-schedule/payment-schedules-table.tsx @@ -1,4 +1,4 @@ -import React, { ReactEventHandler, ReactNode, useState } from 'react'; +import React, { ReactEventHandler, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { Loader } from '../base/loader'; import moment from 'moment'; diff --git a/app/frontend/src/javascript/components/pricing/configure-packs-button.tsx b/app/frontend/src/javascript/components/pricing/configure-packs-button.tsx index f0375f3d6..cf938939a 100644 --- a/app/frontend/src/javascript/components/pricing/configure-packs-button.tsx +++ b/app/frontend/src/javascript/components/pricing/configure-packs-button.tsx @@ -1,52 +1,122 @@ -import React, { useState } from 'react'; +import React, { ReactNode, useState } from 'react'; import { PrepaidPack } from '../../models/prepaid-pack'; -import { FabModal } from '../base/fab-modal'; import { useTranslation } from 'react-i18next'; +import { FabPopover } from '../base/fab-popover'; +import { NewPackModal } from './new-pack-modal'; +import PrepaidPackAPI from '../../api/prepaid-pack'; +import { IFablab } from '../../models/fablab'; +import { duration } from 'moment'; +import { FabButton } from '../base/fab-button'; + +declare var Fablab: IFablab; interface ConfigurePacksButtonProps { - packs: Array, + packsData: Array, onError: (message: string) => void, + onSuccess: (message: string) => void, + groupId: number, + priceableId: number, + priceableType: string, } /** * This component is a button that shows the list of prepaid-packs when moving the mouse over it. - * When clicked, it opens a modal dialog to configure (add/delete/edit/remove) prepaid-packs. + * It also triggers modal dialogs to configure (add/delete/edit/remove) prepaid-packs. */ -export const ConfigurePacksButton: React.FC = ({ packs, onError }) => { +export const ConfigurePacksButton: React.FC = ({ packsData, onError, onSuccess, groupId, priceableId, priceableType }) => { const { t } = useTranslation('admin'); + + const [packs, setPacks] = useState>(packsData); const [showList, setShowList] = useState(false); const [addPackModal, setAddPackModal] = useState(false); + const [editPackModal, setEditPackModal] = useState(false); + const [deletePackModal, setDeletePackModal] = useState(false); + /** + * Return the formatted localized amount for the given price (e.g. 20.5 => "20,50 €") + */ + const formatPrice = (price: number): string => { + return new Intl.NumberFormat(Fablab.intl_locale, { style: 'currency', currency: Fablab.intl_currency }).format(price); + } + + /** + * Return the number of hours, user-friendly formatted + */ + const formatDuration = (minutes: number): string => { + return t('app.admin.configure_packs_button.pack_DURATION', { DURATION: minutes / 60 }); + } + + /** + * Open/closes the popover listing the existing packs + */ const toggleShowList = (): void => { setShowList(!showList); } + /** + * Open/closes the "new pack" modal + */ const toggleAddPackModal = (): void => { setAddPackModal(!addPackModal); } - const handleAddPack = (): void => { - toggleAddPackModal(); + /** + * Open/closes the "edit pack" modal + */ + const toggleEditPackModal = (): void => { + setEditPackModal(!editPackModal); + } + + /** + * Open/closes the "confirm delete pack" modal + */ + const toggleRemovePackModal = (): void => { + setDeletePackModal(!deletePackModal); + } + + /** + * Callback triggered when the PrepaidPack was successfully created. + * We refresh the list of packs for the current button to get the new one. + */ + const handlePackCreated = (message: string) => { + onSuccess(message); + PrepaidPackAPI.index({ group_id: groupId, priceable_id: priceableId, priceable_type: priceableType }) + .then(data => setPacks(data)) + .catch(error => onError(error)); + } + + /** + * Render the button used to trigger the "new pack" modal + */ + const renderAddButton = (): ReactNode => { + return ; } return ( -
- - {showList &&
-
-

{t('app.admin.configure_packs_button.packs')}

- -
-
-
    - {packs?.map(p =>
  • {p.minutes / 60}h - {p.amount}
    • )} -
- {packs?.length === 0 && {t('app.admin.configure_packs_button.no_packs')}} -
-
} - NEW PACK + {showList && +
    + {packs?.map(p => +
  • + {formatDuration(p.minutes)} - {formatPrice(p.amount)} + + + + +
    • )} +
+ {packs?.length === 0 && {t('app.admin.configure_packs_button.no_packs')}} + } +
); } diff --git a/app/frontend/src/javascript/components/pricing/machines-pricing.tsx b/app/frontend/src/javascript/components/pricing/machines-pricing.tsx index 950fded62..2e7cc699e 100644 --- a/app/frontend/src/javascript/components/pricing/machines-pricing.tsx +++ b/app/frontend/src/javascript/components/pricing/machines-pricing.tsx @@ -39,13 +39,13 @@ const MachinesPricing: React.FC = ({ onError, onSuccess }) // retrieve the initial data useEffect(() => { - MachineAPI.index([{ key: 'disabled', value: false }]) + MachineAPI.index({ disabled: false }) .then(data => setMachines(data)) .catch(error => onError(error)); GroupAPI.index({ disabled: false , admins: false }) .then(data => setGroups(data)) .catch(error => onError(error)); - PriceAPI.index([{ key: 'priceable_type', value: 'Machine'}, { key: 'plan_id', value: null }]) + PriceAPI.index({ priceable_type: 'Machine', plan_id: null }) .then(data => updatePrices(data)) .catch(error => onError(error)); PrepaidPackAPI.index() @@ -74,11 +74,14 @@ const MachinesPricing: React.FC = ({ onError, onSuccess }) * Find the price matching the given criterion */ const findPriceBy = (machineId, groupId): Price => { - for (const price of prices) { - if ((price.priceable_id === machineId) && (price.group_id === groupId)) { - return price; - } - } + return prices.find(price => price.priceable_id === machineId && price.group_id === groupId); + }; + + /** + * Filter the packs matching the given criterion + */ + const filterPacksBy = (machineId, groupId): Array => { + return packs.filter(pack => pack.priceable_id === machineId && pack.group_id === groupId); }; /** @@ -123,7 +126,12 @@ const MachinesPricing: React.FC = ({ onError, onSuccess }) {machine.name} {groups?.map(group => {prices && } - {packs && } + {packs && } )} )} diff --git a/app/frontend/src/javascript/components/pricing/new-pack-modal.tsx b/app/frontend/src/javascript/components/pricing/new-pack-modal.tsx new file mode 100644 index 000000000..79e10854c --- /dev/null +++ b/app/frontend/src/javascript/components/pricing/new-pack-modal.tsx @@ -0,0 +1,58 @@ +import React from 'react'; +import { FabModal } from '../base/fab-modal'; +import { PackForm } from './pack-form'; +import { PrepaidPack } from '../../models/prepaid-pack'; +import PrepaidPackAPI from '../../api/prepaid-pack'; +import { useTranslation } from 'react-i18next'; +import { FabAlert } from '../base/fab-alert'; + +interface NewPackModalProps { + isOpen: boolean, + toggleModal: () => void, + onSuccess: (message: string) => void, + onError: (message: string) => void, + groupId: number, + priceableId: number, + priceableType: string, +} + +/** + * This component is a modal dialog handing the process of creating a new PrepaidPack + */ +export const NewPackModal: React.FC = ({ isOpen, toggleModal, onSuccess, onError, groupId, priceableId, priceableType }) => { + const { t } = useTranslation('admin'); + + /** + * Callback triggered when the user has validated the creation of the new PrepaidPack + */ + const handleSubmit = (pack: PrepaidPack): void => { + // set the already-known attributes of the new pack + const newPack = Object.assign({} as PrepaidPack, pack); + newPack.group_id = groupId; + newPack.priceable_id = priceableId; + newPack.priceable_type = priceableType; + + // create it on the API + PrepaidPackAPI.create(newPack) + .then(() => { + onSuccess(t('app.admin.new_pack_modal.pack_successfully_created')); + toggleModal(); + }) + .catch(error => onError(error)); + } + + return ( + + + {t('app.admin.new_pack_modal.new_pack_info', { TYPE: priceableType })} + + + + ); +} diff --git a/app/frontend/src/javascript/components/pricing/pack-form.tsx b/app/frontend/src/javascript/components/pricing/pack-form.tsx new file mode 100644 index 000000000..6ee5c0830 --- /dev/null +++ b/app/frontend/src/javascript/components/pricing/pack-form.tsx @@ -0,0 +1,124 @@ +import React, { BaseSyntheticEvent } from 'react'; +import Select from 'react-select'; +import { PrepaidPack } from '../../models/prepaid-pack'; +import { useTranslation } from 'react-i18next'; +import { useImmer } from 'use-immer'; +import { FabInput } from '../base/fab-input'; +import { IFablab } from '../../models/fablab'; + +declare var Fablab: IFablab; + +interface PackFormProps { + formId: string, + onSubmit: (pack: PrepaidPack) => void, + packData?: PrepaidPack, +} + +const ALL_INTERVALS = ['day', 'week', 'month', 'year'] as const; +type interval = typeof ALL_INTERVALS[number]; + +/** + * Option format, expected by react-select + * @see https://github.com/JedWatson/react-select + */ +type selectOption = { value: interval, label: string }; + +/** + * A form component to create/edit a PrepaidPack. + * The form validation must be created elsewhere, using the attribute form={formId}. + */ +export const PackForm: React.FC = ({ formId, onSubmit, packData }) => { + const [pack, updatePack] = useImmer(packData || {} as PrepaidPack); + + const { t } = useTranslation('admin'); + + /** + * Convert all validity intervals to the react-select format + */ + const buildOptions = (): Array => { + return ALL_INTERVALS.map(i => { + return { value: i, label: t(`app.admin.pack_form.intervals.${i}`, { COUNT: pack.validity_count || 0 }) }; + }); + } + + /** + * Callback triggered when the user sends the form. + */ + const handleSubmit = (event: BaseSyntheticEvent): void => { + event.preventDefault(); + onSubmit(pack); + } + + /** + * Callback triggered when the user inputs an amount for the current pack. + */ + const handleUpdateAmount = (amount: string) => { + updatePack(draft => { + draft.amount = parseFloat(amount); + }); + } + + /** + * Callback triggered when the user inputs a number of hours for the current pack. + */ + const handleUpdateHours = (hours: string) => { + updatePack(draft => { + draft.minutes = parseInt(hours, 10) * 60; + }); + } + + /** + * Callback triggered when the user inputs a number of periods for the current pack. + */ + const handleUpdateValidityCount = (count: string) => { + updatePack(draft => { + draft.validity_count = parseInt(count, 10); + }); + } + + /** + * Callback triggered when the user selects a type of interval for the current pack. + */ + const handleUpdateValidityInterval = (option: selectOption) => { + updatePack(draft => { + draft.validity_interval = option.value as interval; + }); + } + + return ( +
+ + } + required /> + + } + addOn={Fablab.intl_currency} + required /> + +
+ } /> +
- +
); diff --git a/app/frontend/src/stylesheets/application.scss b/app/frontend/src/stylesheets/application.scss index c69dd1745..79de669c3 100644 --- a/app/frontend/src/stylesheets/application.scss +++ b/app/frontend/src/stylesheets/application.scss @@ -61,5 +61,6 @@ @import "modules/pricing/configure-packs-button"; @import "modules/pricing/pack-form"; @import "modules/pricing/delete-pack"; +@import "modules/pricing/edit-pack"; @import "app.responsive"; diff --git a/app/frontend/src/stylesheets/modules/pricing/edit-pack.scss b/app/frontend/src/stylesheets/modules/pricing/edit-pack.scss new file mode 100644 index 000000000..1b87b732c --- /dev/null +++ b/app/frontend/src/stylesheets/modules/pricing/edit-pack.scss @@ -0,0 +1,3 @@ +.edit-pack { + display: inline-block; +} diff --git a/config/locales/app.admin.en.yml b/config/locales/app.admin.en.yml index 9d89d7dea..b5cfdfa33 100644 --- a/config/locales/app.admin.en.yml +++ b/config/locales/app.admin.en.yml @@ -389,7 +389,7 @@ en: week: "{COUNT, plural, one{Week} other{Weeks}}" month: "{COUNT, plural, one{Month} other{Months}}" year: "{COUNT, plural, one{Year} other{Years}}" - new_pack_modal: + create_pack: new_pack: "New prepaid pack" new_pack_info: "A prepaid pack allows users to buy {TYPE, select, Machine{machine} Space{space} other{}} hours before booking any slots. These packs can provide discounts on volumes purchases." create_pack: "Create this pack" @@ -400,6 +400,10 @@ en: delete_pack: "Delete the prepaid pack" confirm_delete: "Delete" delete_confirmation: "Are you sure you want to delete this prepaid pack? This won't be possible if the pack was already bought by users." + edit_pack: + edit_pack: "Edit the pack" + confirm_changes: "Confirm changes" + pack_successfully_updated: "The prepaid pack was successfully updated." #ajouter un code promotionnel coupons_new: add_a_coupon: "Add a coupon" From c0211cd002bdf39b21cf3424a651bed533fbca2a Mon Sep 17 00:00:00 2001 From: Sylvain Date: Fri, 25 Jun 2021 11:03:01 +0200 Subject: [PATCH 32/57] fix handling of external login process --- .../src/javascript/components/machines/reserve-button.tsx | 2 ++ app/frontend/src/javascript/controllers/plans.js | 1 + app/frontend/src/javascript/lib/i18n.ts | 3 ++- 3 files changed, 5 insertions(+), 1 deletion(-) diff --git a/app/frontend/src/javascript/components/machines/reserve-button.tsx b/app/frontend/src/javascript/components/machines/reserve-button.tsx index d4667ba72..91a9b1311 100644 --- a/app/frontend/src/javascript/components/machines/reserve-button.tsx +++ b/app/frontend/src/javascript/components/machines/reserve-button.tsx @@ -34,6 +34,8 @@ const ReserveButtonComponent: React.FC = ({ currentUser, mac const [pendingTraining, setPendingTraining] = useState(false); const [trainingRequired, setTrainingRequired] = useState(false); + // handle login from an external process + useEffect(() => setUser(currentUser), [currentUser]); // refresh the machine after the user has logged useEffect(() => { if (user !== currentUser) getMachine(); diff --git a/app/frontend/src/javascript/controllers/plans.js b/app/frontend/src/javascript/controllers/plans.js index 5bfb1b181..59506ee0b 100644 --- a/app/frontend/src/javascript/controllers/plans.js +++ b/app/frontend/src/javascript/controllers/plans.js @@ -93,6 +93,7 @@ Application.Controllers.controller('PlansIndexController', ['$scope', '$rootScop setTimeout(() => { if (!$scope.isAuthenticated()) { $scope.login(); + $scope.$apply(); } }, 50); }; diff --git a/app/frontend/src/javascript/lib/i18n.ts b/app/frontend/src/javascript/lib/i18n.ts index e7cf9ce1c..153172d74 100644 --- a/app/frontend/src/javascript/lib/i18n.ts +++ b/app/frontend/src/javascript/lib/i18n.ts @@ -2,8 +2,9 @@ import i18n from 'i18next'; import ICU from 'i18next-icu'; import HttpApi from 'i18next-http-backend'; import { initReactI18next } from 'react-i18next'; +import { IFablab } from '../models/fablab'; -declare var Fablab: any; +declare var Fablab: IFablab; i18n .use(ICU) From 99bd00949ee66af29ffc9839df232f5e5353900b Mon Sep 17 00:00:00 2001 From: Sylvain Date: Fri, 25 Jun 2021 11:10:17 +0200 Subject: [PATCH 33/57] fix handling after internal login --- .../src/javascript/components/machines/reserve-button.tsx | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/app/frontend/src/javascript/components/machines/reserve-button.tsx b/app/frontend/src/javascript/components/machines/reserve-button.tsx index 91a9b1311..36434779a 100644 --- a/app/frontend/src/javascript/components/machines/reserve-button.tsx +++ b/app/frontend/src/javascript/components/machines/reserve-button.tsx @@ -36,10 +36,6 @@ const ReserveButtonComponent: React.FC = ({ currentUser, mac // handle login from an external process useEffect(() => setUser(currentUser), [currentUser]); - // refresh the machine after the user has logged - useEffect(() => { - if (user !== currentUser) getMachine(); - }, [user]); // check the trainings after we retrieved the machine data useEffect(() => checkTraining(), [machine]); @@ -92,7 +88,7 @@ const ReserveButtonComponent: React.FC = ({ currentUser, mac // if there's no user currently logged, trigger the logging process if (!user) { onLoginRequested() - .then(user => setUser(user)) + .then(() => getMachine()) .catch(error => onError(error)); return; } From f16cbc44ff35ae991adf689129c0d74eaf5f6e75 Mon Sep 17 00:00:00 2001 From: Sylvain Date: Fri, 25 Jun 2021 17:24:34 +0200 Subject: [PATCH 34/57] WIP: buy pack modal --- CHANGELOG.md | 2 + app/controllers/api/prices_controller.rb | 2 - .../machines/propose-packs-modal.tsx | 113 ++++++++++++++++++ .../components/machines/reserve-button.tsx | 35 +++++- .../pricing/configure-packs-button.tsx | 1 - app/frontend/src/javascript/models/machine.ts | 3 + .../src/javascript/models/prepaid-pack.ts | 11 +- app/frontend/src/stylesheets/application.scss | 1 + .../modules/machines/propose-packs-modal.scss | 24 ++++ app/models/machine.rb | 8 ++ app/models/prepaid_pack.rb | 3 + app/models/setting.rb | 3 +- app/models/space.rb | 1 + app/models/user.rb | 6 + app/policies/price_policy.rb | 7 +- app/services/prepaid_pack_service.rb | 37 +++++- app/views/api/machines/show.json.jbuilder | 13 +- config/locales/app.logged.en.yml | 6 + db/seeds.rb | 2 + 19 files changed, 252 insertions(+), 26 deletions(-) create mode 100644 app/frontend/src/javascript/components/machines/propose-packs-modal.tsx create mode 100644 app/frontend/src/stylesheets/modules/machines/propose-packs-modal.scss diff --git a/CHANGELOG.md b/CHANGELOG.md index 877999927..2df03b3e0 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,7 @@ # Changelog Fab-manager +- [TODO DEPLOY] `rails db:seed` + ## v5.0.7 2021 June 24 - Fix a bug: unable to export members list if no subscriptions was taken diff --git a/app/controllers/api/prices_controller.rb b/app/controllers/api/prices_controller.rb index b51e6f7b0..61d7f80ba 100644 --- a/app/controllers/api/prices_controller.rb +++ b/app/controllers/api/prices_controller.rb @@ -6,8 +6,6 @@ class API::PricesController < API::ApiController before_action :authenticate_user! def index - authorize Price - @prices = PriceService.list(params) end diff --git a/app/frontend/src/javascript/components/machines/propose-packs-modal.tsx b/app/frontend/src/javascript/components/machines/propose-packs-modal.tsx new file mode 100644 index 000000000..168c78997 --- /dev/null +++ b/app/frontend/src/javascript/components/machines/propose-packs-modal.tsx @@ -0,0 +1,113 @@ +import React, { BaseSyntheticEvent, useEffect, useState } from 'react'; +import { Machine } from '../../models/machine'; +import { FabModal, ModalSize } from '../base/fab-modal'; +import PrepaidPackAPI from '../../api/prepaid-pack'; +import { User } from '../../models/user'; +import { PrepaidPack } from '../../models/prepaid-pack'; +import { useTranslation } from 'react-i18next'; +import { IFablab } from '../../models/fablab'; +import { FabButton } from '../base/fab-button'; +import PriceAPI from '../../api/price'; +import { Price } from '../../models/price'; + +declare var Fablab: IFablab; + +interface ProposePacksModalProps { + isOpen: boolean, + toggleModal: () => void, + machine: Machine, + customer: User, + onError: (message: string) => void, + onDecline: (machine: Machine) => void, +} + +/** + * Modal dialog shown to offer prepaid-packs for purchase, to the current user. + */ +export const ProposePacksModal: React.FC = ({ isOpen, toggleModal, machine, customer, onError, onDecline }) => { + const { t } = useTranslation('logged'); + + const [price, setPrice] = useState(null); + const [packs, setPacks] = useState>(null); + + useEffect(() => { + PrepaidPackAPI.index({ priceable_id: machine.id, priceable_type: 'Machine', group_id: customer.group_id, disabled: false }) + .then(data => setPacks(data)) + .catch(error => onError(error)); + PriceAPI.index({ priceable_id: machine.id, priceable_type: 'Machine', group_id: customer.group_id, plan_id: null }) + .then(data => setPrice(data[0])) + .catch(error => onError(error)); + }, [machine]); + + + /** + * Return the formatted localized amount for the given price (e.g. 20.5 => "20,50 €") + */ + const formatPrice = (price: number): string => { + return new Intl.NumberFormat(Fablab.intl_locale, { style: 'currency', currency: Fablab.intl_currency }).format(price); + } + + /** + * Convert the hourly-based price of the given prive, to a total price, based on the duration of the given pack + */ + const hourlyPriceToTotal = (price: Price, pack: PrepaidPack): number => { + const hours = pack.minutes / 60; + return price.amount * hours; + } + + /** + * Return the number of hours, user-friendly formatted + */ + const formatDuration = (minutes: number): string => { + return t('app.logged.propose_packs_modal.pack_DURATION', { DURATION: minutes / 60 }); + } + /** + * The user has declined to buy a pack + */ + const handlePacksRefused = (): void => { + onDecline(machine); + } + + /** + * The user has accepted to buy the provided pack, process with teh payment + */ + const handleBuyPack = (pack: PrepaidPack) => { + return (event: BaseSyntheticEvent): void => { + console.log(pack); + } + } + + /** + * Render the given prepaid-pack + */ + const renderPack = (pack: PrepaidPack) => { + if (!price) return; + + const normalPrice = hourlyPriceToTotal(price, pack) + return ( +
+ {formatDuration(pack.minutes)} + {formatPrice(pack.amount)} + {pack.amount < normalPrice && {formatPrice(normalPrice)}} + }> + {t('app.logged.propose_packs_modal.buy_this_pack')} + +
+ ) + } + + return ( + +

{t('app.logged.propose_packs_modal.packs_proposed')}

+
+ {packs?.map(p => renderPack(p))} +
+ + ); +} diff --git a/app/frontend/src/javascript/components/machines/reserve-button.tsx b/app/frontend/src/javascript/components/machines/reserve-button.tsx index 36434779a..ab525ca07 100644 --- a/app/frontend/src/javascript/components/machines/reserve-button.tsx +++ b/app/frontend/src/javascript/components/machines/reserve-button.tsx @@ -8,6 +8,7 @@ import { react2angular } from 'react2angular'; import { IApplication } from '../../models/application'; import { useTranslation } from 'react-i18next'; import { Loader } from '../base/loader'; +import { ProposePacksModal } from './propose-packs-modal'; declare var Application: IApplication; @@ -33,6 +34,7 @@ const ReserveButtonComponent: React.FC = ({ currentUser, mac const [user, setUser] = useState(currentUser); const [pendingTraining, setPendingTraining] = useState(false); const [trainingRequired, setTrainingRequired] = useState(false); + const [proposePacks, setProposePacks] = useState(false); // handle login from an external process useEffect(() => setUser(currentUser), [currentUser]); @@ -78,6 +80,13 @@ const ReserveButtonComponent: React.FC = ({ currentUser, mac setTrainingRequired(!trainingRequired); }; + /** + * Open/closes the modal dialog inviting the user to buy a prepaid-pack + */ + const toggleProposePacksModal = (): void => { + setProposePacks(!proposePacks); + } + /** * Check that the current user has passed the required training before allowing him to book */ @@ -94,11 +103,11 @@ const ReserveButtonComponent: React.FC = ({ currentUser, mac } // if the currently logged user has completed the training for this machine, or this machine does not require - // a prior training, just let him reserve. - // Moreover, if all associated trainings are disabled, let the user reserve too. + // a prior training, move forward to the prepaid-packs verification. + // Moreover, if there's no enabled associated trainings, also move to the next step. if (machine.current_user_is_trained || machine.trainings.length === 0 || machine.trainings.map(t => t.disabled).reduce((acc, val) => acc && val, true)) { - return onReserveMachine(machine); + return checkPrepaidPack(); } // if the currently logged user booked a training for this machine, tell him that he must wait @@ -112,6 +121,20 @@ const ReserveButtonComponent: React.FC = ({ currentUser, mac setTrainingRequired(true); }; + /** + * Once the training condition has been verified, we check if there are prepaid-packs to propose to the customer. + */ + const checkPrepaidPack = (): void => { + // if the customer has already bought a pack or if there's no active packs for this machine, + // let the customer reserve + if (machine.current_user_has_packs || !machine.has_prepaid_packs_for_current_user) { + return onReserveMachine(machine); + } + + // otherwise, we show a dialog modal to propose the customer to buy an available pack + setProposePacks(true); + } + return (
{{ helperText | translate }} diff --git a/app/frontend/templates/admin/settings/reservations.html b/app/frontend/templates/admin/settings/reservations.html index 70597a1b8..ad2a10ec1 100644 --- a/app/frontend/templates/admin/settings/reservations.html +++ b/app/frontend/templates/admin/settings/reservations.html @@ -157,5 +157,17 @@ label="app.admin.settings.show_event" classes="m-l">
+
+

{{ 'app.admin.settings.display_invite_to_renew_pack' }}

+

+ + +
diff --git a/app/services/prepaid_pack_service.rb b/app/services/prepaid_pack_service.rb index 44f3b2e07..29efbc1b3 100644 --- a/app/services/prepaid_pack_service.rb +++ b/app/services/prepaid_pack_service.rb @@ -23,7 +23,7 @@ class PrepaidPackService .includes(:prepaid_pack) .references(:prepaid_packs) .where('statistic_profile_id = ?', user.statistic_profile.id) - .where('expires_at < ?', DateTime.current) + .where('expires_at > ?', DateTime.current) .where('prepaid_packs.priceable_id = ?', priceable.id) .where('prepaid_packs.priceable_type = ?', priceable.class.name) diff --git a/config/locales/app.admin.en.yml b/config/locales/app.admin.en.yml index b5cfdfa33..76639b349 100644 --- a/config/locales/app.admin.en.yml +++ b/config/locales/app.admin.en.yml @@ -1205,6 +1205,9 @@ en: public_agenda_module: "public agenda module" statistics_module: "statistics module" upcoming_events_shown: "display limit for upcoming events" + display_invite_to_renew_pack: "Display the invite to renew prepaid-packs" + packs_threshold_info_html: "You can define under how many hours the user will be invited to buy a prepaid-pack, if his stock of prepaid hours in under this threshold.
You can set a number of hours (eg. 5) or a percentage of his current pack pack (eg. 0.05 means 5%)." + renew_pack_threshold: "threshold for packs renewal" general: general: "General" title: "Title" diff --git a/config/locales/app.admin.fr.yml b/config/locales/app.admin.fr.yml index a47752f66..cad85b338 100644 --- a/config/locales/app.admin.fr.yml +++ b/config/locales/app.admin.fr.yml @@ -1170,6 +1170,9 @@ fr: public_agenda_module: "module d'agenda public" statistics_module: "module de statistiques" upcoming_events_shown: "la limite d'affichage des événements à venir" + display_invite_to_renew_pack: "Display the invite to renew prepaid-packs" + packs_threshold_info_html: "You can define under how many hours the user will be invited to buy a prepaid-pack, if his stock of prepaid hours in under this threshold.
You can set a number of hours (eg. 5) or a percentage of his current pack pack (eg. 0.05 means 5%)." + renew_pack_threshold: "Threshold for packs renewal" general: general: "Général" title: "Titre" From baf41588d3b7e08c6a63c177d30b725a07135343 Mon Sep 17 00:00:00 2001 From: Sylvain Date: Tue, 29 Jun 2021 11:14:36 +0200 Subject: [PATCH 44/57] packs summary component --- app/controllers/api/user_packs_controller.rb | 22 +++ app/frontend/src/javascript/api/user-pack.ts | 16 +++ .../components/machines/reserve-button.tsx | 13 +- .../prepaid-packs/packs-summary.tsx | 127 ++++++++++++++++++ .../propose-packs-modal.tsx | 23 ++-- app/frontend/src/javascript/models/setting.ts | 3 +- .../src/javascript/models/user-pack.ts | 14 ++ app/models/user.rb | 8 +- app/policies/setting_policy.rb | 2 +- app/services/prepaid_pack_service.rb | 25 ++-- app/views/api/user_packs/index.json.jbuilder | 8 ++ config/locales/app.logged.en.yml | 3 + config/routes.rb | 1 + 13 files changed, 229 insertions(+), 36 deletions(-) create mode 100644 app/controllers/api/user_packs_controller.rb create mode 100644 app/frontend/src/javascript/api/user-pack.ts create mode 100644 app/frontend/src/javascript/components/prepaid-packs/packs-summary.tsx rename app/frontend/src/javascript/components/{machines => prepaid-packs}/propose-packs-modal.tsx (89%) create mode 100644 app/frontend/src/javascript/models/user-pack.ts create mode 100644 app/views/api/user_packs/index.json.jbuilder diff --git a/app/controllers/api/user_packs_controller.rb b/app/controllers/api/user_packs_controller.rb new file mode 100644 index 000000000..479bb1677 --- /dev/null +++ b/app/controllers/api/user_packs_controller.rb @@ -0,0 +1,22 @@ +# frozen_string_literal: true + +# API Controller for resources of type StatisticProfilePrepaidPack +class UserPacksController < API::ApiController + before_action :authenticate_user! + + def index + @user_packs = PrepaidPackService.user_packs(user, item) + end + + private + + def user + return User.find(params[:user_id]) if current_user.privileged? + + current_user + end + + def item + params[:priceable_type].classify.constantize.find(params[:priceable_id]) + end +end diff --git a/app/frontend/src/javascript/api/user-pack.ts b/app/frontend/src/javascript/api/user-pack.ts new file mode 100644 index 000000000..6df870cf1 --- /dev/null +++ b/app/frontend/src/javascript/api/user-pack.ts @@ -0,0 +1,16 @@ +import apiClient from './clients/api-client'; +import { UserPack, UserPackIndexFilter } from '../models/user-pack'; +import { AxiosResponse } from 'axios'; + +export default class UserPackAPI { + static async index(filters: UserPackIndexFilter): Promise> { + const res: AxiosResponse> = await apiClient.get(`/api/user_packs${this.filtersToQuery(filters)}`); + return res?.data; + } + + private static filtersToQuery(filters?: UserPackIndexFilter): string { + if (!filters) return ''; + + return '?' + Object.entries(filters).map(f => `${f[0]}=${f[1]}`).join('&'); + } +} diff --git a/app/frontend/src/javascript/components/machines/reserve-button.tsx b/app/frontend/src/javascript/components/machines/reserve-button.tsx index e359d7bfa..4f9cad2a8 100644 --- a/app/frontend/src/javascript/components/machines/reserve-button.tsx +++ b/app/frontend/src/javascript/components/machines/reserve-button.tsx @@ -1,14 +1,14 @@ import React, { useEffect, useState } from 'react'; +import { useTranslation } from 'react-i18next'; +import { react2angular } from 'react2angular'; import { PendingTrainingModal } from './pending-training-modal'; +import { RequiredTrainingModal } from './required-training-modal'; +import { Loader } from '../base/loader'; +import { ProposePacksModal } from '../prepaid-packs/propose-packs-modal'; import MachineAPI from '../../api/machine'; import { Machine } from '../../models/machine'; import { User } from '../../models/user'; -import { RequiredTrainingModal } from './required-training-modal'; -import { react2angular } from 'react2angular'; import { IApplication } from '../../models/application'; -import { useTranslation } from 'react-i18next'; -import { Loader } from '../base/loader'; -import { ProposePacksModal } from './propose-packs-modal'; declare var Application: IApplication; @@ -161,7 +161,8 @@ const ReserveButtonComponent: React.FC = ({ currentUser, mac onEnrollRequested={onEnrollRequested} /> {machine && currentUser && void, + onSuccess: (message: string) => void, +} + +const PacksSummaryComponent: React.FC = ({ item, itemType, customer, operator, onError, onSuccess }) => { + const { t } = useTranslation('logged'); + + const [userPacks, setUserPacks] = useState>(null); + const [threshold, setThreshold] = useState(null); + const [packsModal, setPacksModal] = useState(false); + + useEffect(() => { + UserPackAPI.index({ user_id: customer.id, priceable_type: itemType, priceable_id: item.id }) + .then(data => setUserPacks(data)) + .catch(error => onError(error)); + SettingAPI.get(SettingName.RenewPackThreshold) + .then(data => setThreshold(parseFloat(data.value))) + .catch(error => onError(error)); + }, [item, itemType, customer]) + + /** + * Total of minutes used by the customer + */ + const totalUsed = (): number => { + if (!userPacks) return 0; + + return userPacks.map(up => up.minutes_used).reduce((acc, curr) => acc + curr); + } + + /** + * Total of minutes available is the packs bought by the customer + */ + const totalAvailable = (): number => { + if (!userPacks) return 0; + + return userPacks.map(up => up.prepaid_pack.minutes).reduce((acc, curr) => acc + curr); + } + + /** + * Total prepaid hours remaining for the current customer + */ + const totalHours = (): number => { + return totalAvailable() - totalUsed() / 60; + } + + /** + * Do we need to display the "renew pack" button? + */ + const shouldDisplayRenew = (): boolean => { + if (threshold < 1) { + return totalAvailable() - totalUsed() >= totalAvailable() * threshold; + } + + return totalAvailable() - totalUsed() >= threshold; + } + + /** + * Open/closes the prepaid-pack buying modal + */ + const togglePacksModal = (): void => { + setPacksModal(!packsModal); + } + + /** + * Callback triggered when the customer has successfully bought a prepaid-pack + */ + const handlePackBoughtSuccess = (message: string): void => { + onSuccess(message); + togglePacksModal(); + UserPackAPI.index({ user_id: customer.id, priceable_type: itemType, priceable_id: item.id }) + .then(data => setUserPacks(data)) + .catch(error => onError(error)); + } + + return ( +
+ {t('app.logged.packs_summary.remaining_HOURS', { HOURS: totalHours(), ITEM: itemType })} + {shouldDisplayRenew() &&
+ }> + {t('app.logged.packs_summary.buy_a_new_pack')} + + +
} +
+ ); +} + +export const PacksSummary: React.FC = ({ item, itemType, customer, operator, onError, onSuccess }) => { + return ( + + + + ); +} + +Application.Components.component('packsSummary', react2angular(PacksSummary, ['item', 'itemType', 'customer', 'operator', 'onError', 'onSuccess'])); diff --git a/app/frontend/src/javascript/components/machines/propose-packs-modal.tsx b/app/frontend/src/javascript/components/prepaid-packs/propose-packs-modal.tsx similarity index 89% rename from app/frontend/src/javascript/components/machines/propose-packs-modal.tsx rename to app/frontend/src/javascript/components/prepaid-packs/propose-packs-modal.tsx index ba9a5c61c..15eb29dc1 100644 --- a/app/frontend/src/javascript/components/machines/propose-packs-modal.tsx +++ b/app/frontend/src/javascript/components/prepaid-packs/propose-packs-modal.tsx @@ -1,4 +1,4 @@ -import React, { BaseSyntheticEvent, useEffect, useState } from 'react'; +import React, { useEffect, useState } from 'react'; import { Machine } from '../../models/machine'; import { FabModal, ModalSize } from '../base/fab-modal'; import PrepaidPackAPI from '../../api/prepaid-pack'; @@ -14,21 +14,24 @@ import { PaymentModal } from '../payment/payment-modal'; declare var Fablab: IFablab; +type PackableItem = Machine; + interface ProposePacksModalProps { isOpen: boolean, toggleModal: () => void, - machine: Machine, + item: PackableItem, + itemType: 'Machine', customer: User, operator: User, onError: (message: string) => void, - onDecline: (machine: Machine) => void, - onSuccess: (message:string, machine: Machine) => void, + onDecline: (item: PackableItem) => void, + onSuccess: (message:string, item: PackableItem) => void, } /** * Modal dialog shown to offer prepaid-packs for purchase, to the current user. */ -export const ProposePacksModal: React.FC = ({ isOpen, toggleModal, machine, customer, operator, onError, onDecline, onSuccess }) => { +export const ProposePacksModal: React.FC = ({ isOpen, toggleModal, item, itemType, customer, operator, onError, onDecline, onSuccess }) => { const { t } = useTranslation('logged'); const [price, setPrice] = useState(null); @@ -37,13 +40,13 @@ export const ProposePacksModal: React.FC = ({ isOpen, to const [paymentModal, setPaymentModal] = useState(false); useEffect(() => { - PrepaidPackAPI.index({ priceable_id: machine.id, priceable_type: 'Machine', group_id: customer.group_id, disabled: false }) + PrepaidPackAPI.index({ priceable_id: item.id, priceable_type: itemType, group_id: customer.group_id, disabled: false }) .then(data => setPacks(data)) .catch(error => onError(error)); - PriceAPI.index({ priceable_id: machine.id, priceable_type: 'Machine', group_id: customer.group_id, plan_id: null }) + PriceAPI.index({ priceable_id: item.id, priceable_type: itemType, group_id: customer.group_id, plan_id: null }) .then(data => setPrice(data[0])) .catch(error => onError(error)); - }, [machine]); + }, [item]); /** @@ -87,7 +90,7 @@ export const ProposePacksModal: React.FC = ({ isOpen, to * The user has declined to buy a pack */ const handlePacksRefused = (): void => { - onDecline(machine); + onDecline(item); } /** @@ -110,7 +113,7 @@ export const ProposePacksModal: React.FC = ({ isOpen, to * Callback triggered when the user has bought the pack with a successful payment */ const handlePackBought = (): void => { - onSuccess(t('app.logged.propose_packs_modal.pack_bought_success'), machine); + onSuccess(t('app.logged.propose_packs_modal.pack_bought_success'), item); } /** diff --git a/app/frontend/src/javascript/models/setting.ts b/app/frontend/src/javascript/models/setting.ts index 3b3a2f52b..5391b00a2 100644 --- a/app/frontend/src/javascript/models/setting.ts +++ b/app/frontend/src/javascript/models/setting.ts @@ -108,7 +108,8 @@ export enum SettingName { PayZenPublicKey = 'payzen_public_key', PayZenHmacKey = 'payzen_hmac', PayZenCurrency = 'payzen_currency', - PublicAgendaModule = 'public_agenda_module' + PublicAgendaModule = 'public_agenda_module', + RenewPackThreshold = 'renew_pack_threshold', } export interface Setting { diff --git a/app/frontend/src/javascript/models/user-pack.ts b/app/frontend/src/javascript/models/user-pack.ts new file mode 100644 index 000000000..ceaf25e25 --- /dev/null +++ b/app/frontend/src/javascript/models/user-pack.ts @@ -0,0 +1,14 @@ + +export interface UserPackIndexFilter { + user_id?: number, + priceable_type: string, + priceable_id: number +} + +export interface UserPack { + minutes_used: number, + expires_at: Date, + prepaid_pack: { + minutes: number, + } +} diff --git a/app/models/user.rb b/app/models/user.rb index 4c3139c2c..f4ad820ec 100644 --- a/app/models/user.rb +++ b/app/models/user.rb @@ -128,10 +128,10 @@ class User < ApplicationRecord trainings.map(&:machines).flatten.uniq.include?(machine) end - def packs?(item, threshold = Setting.get('renew_pack_threshold')) + def packs?(item) return true if admin? - PrepaidPackService.user_packs(self, item, threshold).count.positive? + PrepaidPackService.user_packs(self, item).count.positive? end def next_training_reservation_by_machine(machine) @@ -170,6 +170,10 @@ class User < ApplicationRecord has_role? :partner end + def privileged? + admin? || manager? + end + def role if admin? 'admin' diff --git a/app/policies/setting_policy.rb b/app/policies/setting_policy.rb index 420bc7662..a4e1dd86d 100644 --- a/app/policies/setting_policy.rb +++ b/app/policies/setting_policy.rb @@ -39,7 +39,7 @@ class SettingPolicy < ApplicationPolicy tracking_id book_overlapping_slots slot_duration events_in_calendar spaces_module plans_module invoicing_module recaptcha_site_key feature_tour_display disqus_shortname allowed_cad_extensions openlab_app_id openlab_default online_payment_module stripe_public_key confirmation_required wallet_module trainings_module address_required - payment_gateway payzen_endpoint payzen_public_key public_agenda_module] + payment_gateway payzen_endpoint payzen_public_key public_agenda_module renew_pack_threshold] end ## diff --git a/app/services/prepaid_pack_service.rb b/app/services/prepaid_pack_service.rb index 29efbc1b3..c57e2a8a0 100644 --- a/app/services/prepaid_pack_service.rb +++ b/app/services/prepaid_pack_service.rb @@ -18,22 +18,15 @@ class PrepaidPackService packs end - def user_packs(user, priceable, threshold) - query = StatisticProfilePrepaidPack - .includes(:prepaid_pack) - .references(:prepaid_packs) - .where('statistic_profile_id = ?', user.statistic_profile.id) - .where('expires_at > ?', DateTime.current) - .where('prepaid_packs.priceable_id = ?', priceable.id) - .where('prepaid_packs.priceable_type = ?', priceable.class.name) - - if threshold.class == Float - query = query.where('prepaid_packs.minutes - minutes_used >= prepaid_packs.minutes * ?', threshold) - elsif threshold.class == Integer - query = query.where('prepaid_packs.minutes - minutes_used >= ?', threshold) - end - - query + # return the not expired packs for the given item bought by the given user + def user_packs(user, priceable) + StatisticProfilePrepaidPack + .includes(:prepaid_pack) + .references(:prepaid_packs) + .where('statistic_profile_id = ?', user.statistic_profile.id) + .where('expires_at > ?', DateTime.current) + .where('prepaid_packs.priceable_id = ?', priceable.id) + .where('prepaid_packs.priceable_type = ?', priceable.class.name) end end end diff --git a/app/views/api/user_packs/index.json.jbuilder b/app/views/api/user_packs/index.json.jbuilder new file mode 100644 index 000000000..81dbabdc2 --- /dev/null +++ b/app/views/api/user_packs/index.json.jbuilder @@ -0,0 +1,8 @@ +# frozen_string_literal: true + +json.array!(@user_packs) do |user_pack| + json.extract! user_pack, :minutes_used, :expires_at + json.prepaid_pack do + json.extract! user_pack.prepaid_pack :minutes + end +end diff --git a/config/locales/app.logged.en.yml b/config/locales/app.logged.en.yml index dc8866813..81c5273ad 100644 --- a/config/locales/app.logged.en.yml +++ b/config/locales/app.logged.en.yml @@ -191,6 +191,9 @@ en: week: "{COUNT, plural, one{week} other{weeks}}" month: "{COUNT, plural, one{month} other{months}}" year: "{COUNT, plural, one{year} other{years}}" + packs_summary: + remaining_HOURS: "You have {HOURS} prepaid hours remaining for this {ITEM, select, Machine{machine} Space{space} other{}}." + buy_a_new_pack: "Buy a new pack" #book a training trainings_reserve: trainings_planning: "Trainings planning" diff --git a/config/routes.rb b/config/routes.rb index 69af67b9e..6bee7c76e 100644 --- a/config/routes.rb +++ b/config/routes.rb @@ -83,6 +83,7 @@ Rails.application.routes.draw do post 'validate', action: 'validate', on: :collection post 'send', action: 'send_to', on: :collection end + resources :user_packs, only: %i[index] resources :trainings_pricings, only: %i[index update] From 10aaf0042c9e5d9fdafb00b73af9051ba2182a7b Mon Sep 17 00:00:00 2001 From: Sylvain Date: Tue, 29 Jun 2021 15:59:57 +0200 Subject: [PATCH 45/57] integration of packs-summary --- app/controllers/api/user_packs_controller.rb | 2 +- .../prepaid-packs/packs-summary.tsx | 67 +++++++++++-------- .../javascript/controllers/machines.js.erb | 26 +++++-- app/frontend/src/javascript/models/machine.ts | 1 - app/frontend/src/javascript/router.js | 1 + app/frontend/src/stylesheets/application.scss | 3 +- .../modules/prepaid-packs/packs-summary.scss | 27 ++++++++ .../propose-packs-modal.scss | 0 app/frontend/templates/machines/reserve.html | 8 +++ app/themes/casemate/style.scss.erb | 2 +- app/views/api/machines/show.json.jbuilder | 3 +- app/views/api/user_packs/index.json.jbuilder | 2 +- config/locales/app.logged.en.yml | 1 + 13 files changed, 103 insertions(+), 40 deletions(-) create mode 100644 app/frontend/src/stylesheets/modules/prepaid-packs/packs-summary.scss rename app/frontend/src/stylesheets/modules/{machines => prepaid-packs}/propose-packs-modal.scss (100%) diff --git a/app/controllers/api/user_packs_controller.rb b/app/controllers/api/user_packs_controller.rb index 479bb1677..afe87e2ec 100644 --- a/app/controllers/api/user_packs_controller.rb +++ b/app/controllers/api/user_packs_controller.rb @@ -1,7 +1,7 @@ # frozen_string_literal: true # API Controller for resources of type StatisticProfilePrepaidPack -class UserPacksController < API::ApiController +class API::UserPacksController < API::ApiController before_action :authenticate_user! def index diff --git a/app/frontend/src/javascript/components/prepaid-packs/packs-summary.tsx b/app/frontend/src/javascript/components/prepaid-packs/packs-summary.tsx index 3595f3621..cfb91df4a 100644 --- a/app/frontend/src/javascript/components/prepaid-packs/packs-summary.tsx +++ b/app/frontend/src/javascript/components/prepaid-packs/packs-summary.tsx @@ -1,4 +1,5 @@ import React, { useEffect, useState } from 'react'; +import _ from 'lodash'; import { Machine } from '../../models/machine'; import { User } from '../../models/user'; import { UserPack } from '../../models/user-pack'; @@ -19,7 +20,7 @@ type PackableItem = Machine; interface PacksSummaryProps { item: PackableItem, itemType: 'Machine', - customer: User, + customer?: User, operator: User, onError: (message: string) => void, onSuccess: (message: string) => void, @@ -33,13 +34,18 @@ const PacksSummaryComponent: React.FC = ({ item, itemType, cu const [packsModal, setPacksModal] = useState(false); useEffect(() => { - UserPackAPI.index({ user_id: customer.id, priceable_type: itemType, priceable_id: item.id }) - .then(data => setUserPacks(data)) - .catch(error => onError(error)); SettingAPI.get(SettingName.RenewPackThreshold) .then(data => setThreshold(parseFloat(data.value))) .catch(error => onError(error)); - }, [item, itemType, customer]) + }, []); + + useEffect(() => { + if (_.isEmpty(customer)) return; + + UserPackAPI.index({ user_id: customer.id, priceable_type: itemType, priceable_id: item.id }) + .then(data => setUserPacks(data)) + .catch(error => onError(error)); + }, [item, itemType, customer]); /** * Total of minutes used by the customer @@ -47,7 +53,7 @@ const PacksSummaryComponent: React.FC = ({ item, itemType, cu const totalUsed = (): number => { if (!userPacks) return 0; - return userPacks.map(up => up.minutes_used).reduce((acc, curr) => acc + curr); + return userPacks.map(up => up.minutes_used).reduce((acc, curr) => acc + curr, 0); } /** @@ -56,25 +62,26 @@ const PacksSummaryComponent: React.FC = ({ item, itemType, cu const totalAvailable = (): number => { if (!userPacks) return 0; - return userPacks.map(up => up.prepaid_pack.minutes).reduce((acc, curr) => acc + curr); + return userPacks.map(up => up.prepaid_pack.minutes).reduce((acc, curr) => acc + curr, 0); } /** * Total prepaid hours remaining for the current customer */ const totalHours = (): number => { - return totalAvailable() - totalUsed() / 60; + return (totalAvailable() - totalUsed()) / 60; } /** - * Do we need to display the "renew pack" button? + * Do we need to display the "buy new pack" button? */ - const shouldDisplayRenew = (): boolean => { + const shouldDisplayButton = (): boolean => { + console.log(threshold); if (threshold < 1) { - return totalAvailable() - totalUsed() >= totalAvailable() * threshold; + return totalAvailable() - totalUsed() <= totalAvailable() * threshold; } - return totalAvailable() - totalUsed() >= threshold; + return totalAvailable() - totalUsed() <= threshold * 60; } /** @@ -95,23 +102,29 @@ const PacksSummaryComponent: React.FC = ({ item, itemType, cu .catch(error => onError(error)); } + // prevent component rendering if no customer selected + if (_.isEmpty(customer)) return
; + return (
- {t('app.logged.packs_summary.remaining_HOURS', { HOURS: totalHours(), ITEM: itemType })} - {shouldDisplayRenew() &&
- }> - {t('app.logged.packs_summary.buy_a_new_pack')} - - -
} +

{t('app.logged.packs_summary.prepaid_hours')}

+
+ {t('app.logged.packs_summary.remaining_HOURS', { HOURS: totalHours(), ITEM: itemType })} + {shouldDisplayButton() &&
+ }> + {t('app.logged.packs_summary.buy_a_new_pack')} + + +
} +
); } diff --git a/app/frontend/src/javascript/controllers/machines.js.erb b/app/frontend/src/javascript/controllers/machines.js.erb index dfd3727c1..eed36ed6e 100644 --- a/app/frontend/src/javascript/controllers/machines.js.erb +++ b/app/frontend/src/javascript/controllers/machines.js.erb @@ -98,8 +98,8 @@ class MachinesController { /** * Controller used in the public listing page, allowing everyone to see the list of machines */ -Application.Controllers.controller('MachinesController', ['$scope', '$state', '_t', 'AuthService', 'Machine', '$uibModal', 'settingsPromise', 'Member', 'uiTourService', 'growl', - function ($scope, $state, _t, AuthService, Machine, $uibModal, settingsPromise, Member, uiTourService, growl) { +Application.Controllers.controller('MachinesController', ['$scope', '$state', '_t', 'AuthService', 'Machine', '$uibModal', 'settingsPromise', 'Member', 'uiTourService', 'machinesPromise', 'growl', + function ($scope, $state, _t, AuthService, Machine, $uibModal, settingsPromise, Member, uiTourService, machinesPromise, growl) { /* PUBLIC SCOPE */ /** @@ -164,7 +164,7 @@ Application.Controllers.controller('MachinesController', ['$scope', '$state', '_ placement: 'bottom', orphan: true }); - if ($scope.machines.length > 0) { + if (machinesPromise.length > 0) { uitour.createStep({ selector: '.machines-list .show-button', stepId: 'view', @@ -185,7 +185,7 @@ Application.Controllers.controller('MachinesController', ['$scope', '$state', '_ orphan: true }); } - if ($scope.machines.length > 0) { + if (machinesPromise.length > 0) { uitour.createStep({ selector: '.machines-list .reserve-button', stepId: 'reserve', @@ -357,8 +357,8 @@ Application.Controllers.controller('ShowMachineController', ['$scope', '$state', * This controller workflow is pretty similar to the trainings reservation controller. */ -Application.Controllers.controller('ReserveMachineController', ['$scope', '$stateParams', '_t', 'moment', 'Auth', '$timeout', 'Member', 'Availability', 'plansPromise', 'groupsPromise', 'machinePromise', 'settingsPromise', 'uiCalendarConfig', 'CalendarConfig', 'Reservation', - function ($scope, $stateParams, _t, moment, Auth, $timeout, Member, Availability, plansPromise, groupsPromise, machinePromise, settingsPromise, uiCalendarConfig, CalendarConfig, Reservation) { +Application.Controllers.controller('ReserveMachineController', ['$scope', '$stateParams', '_t', 'moment', 'Auth', '$timeout', 'Member', 'Availability', 'plansPromise', 'groupsPromise', 'machinePromise', 'settingsPromise', 'uiCalendarConfig', 'CalendarConfig', 'Reservation', 'growl', + function ($scope, $stateParams, _t, moment, Auth, $timeout, Member, Availability, plansPromise, groupsPromise, machinePromise, settingsPromise, uiCalendarConfig, CalendarConfig, Reservation, growl) { /* PRIVATE STATIC CONSTANTS */ // Slot free to be booked @@ -626,6 +626,20 @@ Application.Controllers.controller('ReserveMachineController', ['$scope', '$stat */ $scope.filterDisabledPlans = function (plan) { return !plan.disabled; }; + /** + * Callback triggered by react components + */ + $scope.onSuccess = function (message) { + growl.success(message); + }; + + /** + * Callback triggered by react components + */ + $scope.onError = function (message) { + growl.error(message); + }; + /* PRIVATE SCOPE */ /** diff --git a/app/frontend/src/javascript/models/machine.ts b/app/frontend/src/javascript/models/machine.ts index b44a161e6..2fd3697e2 100644 --- a/app/frontend/src/javascript/models/machine.ts +++ b/app/frontend/src/javascript/models/machine.ts @@ -25,7 +25,6 @@ export interface Machine { current_user_is_trained?: boolean, current_user_next_training_reservation?: Reservation, current_user_has_packs?: boolean, - current_user_available_for_packs_renewal?: boolean, has_prepaid_packs_for_current_user?: boolean, machine_projects?: Array<{ id: number, diff --git a/app/frontend/src/javascript/router.js b/app/frontend/src/javascript/router.js index 711b11295..70fa98b8e 100644 --- a/app/frontend/src/javascript/router.js +++ b/app/frontend/src/javascript/router.js @@ -324,6 +324,7 @@ angular.module('application.router', ['ui.router']) } }, resolve: { + machinesPromise: ['Machine', function (Machine) { return Machine.query().$promise; }], settingsPromise: ['Setting', function (Setting) { return Setting.query({ names: "['feature_tour_display']" }).$promise; }] } }) diff --git a/app/frontend/src/stylesheets/application.scss b/app/frontend/src/stylesheets/application.scss index 7f28488b1..a70ce6533 100644 --- a/app/frontend/src/stylesheets/application.scss +++ b/app/frontend/src/stylesheets/application.scss @@ -55,7 +55,6 @@ @import "modules/machines/machines-list"; @import "modules/machines/machines-filters"; @import "modules/machines/required-training-modal"; -@import "modules/machines/propose-packs-modal"; @import "modules/user/avatar"; @import "modules/pricing/machines-pricing"; @import "modules/pricing/editable-price"; @@ -63,5 +62,7 @@ @import "modules/pricing/pack-form"; @import "modules/pricing/delete-pack"; @import "modules/pricing/edit-pack"; +@import "modules/prepaid-packs/propose-packs-modal"; +@import "modules/prepaid-packs/packs-summary"; @import "app.responsive"; diff --git a/app/frontend/src/stylesheets/modules/prepaid-packs/packs-summary.scss b/app/frontend/src/stylesheets/modules/prepaid-packs/packs-summary.scss new file mode 100644 index 000000000..7a3fc4caa --- /dev/null +++ b/app/frontend/src/stylesheets/modules/prepaid-packs/packs-summary.scss @@ -0,0 +1,27 @@ +.packs-summary { + border: 1px solid #ddd; + margin: 15px; + padding: 0; + border-radius: 6px; + + h3 { + border-bottom: 1px solid #ddd; + padding: 15px; + margin: 0; + line-height: 1.8rem; + font-size: 1.4rem; + font-weight: 600; + } + + .content { + padding: 15px; + + .button-wrapper { + text-align: center; + + .buy-button { + margin-top: 5px; + } + } + } +} diff --git a/app/frontend/src/stylesheets/modules/machines/propose-packs-modal.scss b/app/frontend/src/stylesheets/modules/prepaid-packs/propose-packs-modal.scss similarity index 100% rename from app/frontend/src/stylesheets/modules/machines/propose-packs-modal.scss rename to app/frontend/src/stylesheets/modules/prepaid-packs/propose-packs-modal.scss diff --git a/app/frontend/templates/machines/reserve.html b/app/frontend/templates/machines/reserve.html index 5b929211f..23c03e5dd 100644 --- a/app/frontend/templates/machines/reserve.html +++ b/app/frontend/templates/machines/reserve.html @@ -29,6 +29,14 @@
+ + + Date: Tue, 29 Jun 2021 16:24:37 +0200 Subject: [PATCH 46/57] =?UTF-8?q?[bug]=20return=20to=20the=20home=20page?= =?UTF-8?q?=20when=20clicking=20=E2=9F=B5=20on=20machines/show?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- CHANGELOG.md | 1 + app/frontend/templates/trainings/show.html | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index cd57457e1..820d11082 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,7 @@ - Fix a bug: unable to filter by multiple user IDs in OpenAPI - Fix a bug: do not display two empty categories in the plan creation form +- Fix a bug: do not return to the home page when clicking on previous in the machine description page - Tests for OpenAPI user trainings - [TODO DEPLOY] `rails db:seed` - [TODO DEPLOY] `rails fablab:maintenance:rebuild_stylesheet` diff --git a/app/frontend/templates/trainings/show.html b/app/frontend/templates/trainings/show.html index 5ca284313..ceef95693 100644 --- a/app/frontend/templates/trainings/show.html +++ b/app/frontend/templates/trainings/show.html @@ -4,7 +4,7 @@
- +
From 9c6a7df0bfef24b946782571a478939a5cd96a84 Mon Sep 17 00:00:00 2001 From: Sylvain Date: Tue, 29 Jun 2021 16:56:40 +0200 Subject: [PATCH 47/57] WIP: compute price including prepaid packs --- .../prepaid-packs/packs-summary.tsx | 1 - app/models/cart_item/event_reservation.rb | 2 +- app/models/cart_item/reservation.rb | 22 ++++++++++++++++--- 3 files changed, 20 insertions(+), 5 deletions(-) diff --git a/app/frontend/src/javascript/components/prepaid-packs/packs-summary.tsx b/app/frontend/src/javascript/components/prepaid-packs/packs-summary.tsx index cfb91df4a..3e5d70478 100644 --- a/app/frontend/src/javascript/components/prepaid-packs/packs-summary.tsx +++ b/app/frontend/src/javascript/components/prepaid-packs/packs-summary.tsx @@ -76,7 +76,6 @@ const PacksSummaryComponent: React.FC = ({ item, itemType, cu * Do we need to display the "buy new pack" button? */ const shouldDisplayButton = (): boolean => { - console.log(threshold); if (threshold < 1) { return totalAvailable() - totalUsed() <= totalAvailable() * threshold; } diff --git a/app/models/cart_item/event_reservation.rb b/app/models/cart_item/event_reservation.rb index 1f6fbc269..c84ed9a24 100644 --- a/app/models/cart_item/event_reservation.rb +++ b/app/models/cart_item/event_reservation.rb @@ -14,7 +14,7 @@ class CartItem::EventReservation < CartItem::Reservation def price amount = @reservable.amount * @normal_tickets - is_privileged = @operator.admin? || (@operator.manager? && @operator.id != @customer.id) + is_privileged = @operator.privileged? && @operator.id != @customer.id @other_tickets.each do |ticket| amount += ticket[:booked] * EventPriceCategory.find(ticket[:event_price_category_id]).amount diff --git a/app/models/cart_item/reservation.rb b/app/models/cart_item/reservation.rb index 242a542e9..f5d442c96 100644 --- a/app/models/cart_item/reservation.rb +++ b/app/models/cart_item/reservation.rb @@ -3,7 +3,7 @@ MINUTES_PER_HOUR = 60.0 SECONDS_PER_MINUTE = 60.0 -GET_SLOT_PRICE_DEFAULT_OPTS = { has_credits: false, elements: nil, is_division: true }.freeze +GET_SLOT_PRICE_DEFAULT_OPTS = { has_credits: false, elements: nil, is_division: true, prepaid_minutes: 0 }.freeze # A generic reservation added to the shopping cart class CartItem::Reservation < CartItem::BaseItem @@ -17,14 +17,18 @@ class CartItem::Reservation < CartItem::BaseItem def price base_amount = @reservable.prices.find_by(group_id: @customer.group_id, plan_id: @plan.try(:id)).amount - is_privileged = @operator.admin? || (@operator.manager? && @operator.id != @customer.id) + is_privileged = @operator.privileged? && @operator.id != @customer.id + prepaid_minutes = get_prepaid_minutes(@customer, @reservable) elements = { slots: [] } amount = 0 hours_available = credits @slots.each_with_index do |slot, index| - amount += get_slot_price(base_amount, slot, is_privileged, elements: elements, has_credits: (index < hours_available)) + amount += get_slot_price(base_amount, slot, is_privileged, + elements: elements, + has_credits: (index < hours_available), + prepaid_minutes: prepaid_minutes) end { elements: elements, amount: amount } @@ -67,6 +71,7 @@ class CartItem::Reservation < CartItem::BaseItem # - elements {Array} if provided the resulting price will be append into elements.slots # - has_credits {Boolean} true if the user still has credits for the given slot, false if not provided # - is_division {boolean} false if the slot covers a full availability, true if it is a subdivision (default) + # - prepaid_minutes {Number} number of remaining prepaid minutes for the customer # @return {Number} price of the slot ## def get_slot_price(hourly_rate, slot, is_privileged, options = {}) @@ -78,6 +83,9 @@ class CartItem::Reservation < CartItem::BaseItem else slot_rate end + if real_price.positive? && options[:prepaid_minutes].positive? + # TODO, remove prepaid minutes + end unless options[:elements].nil? options[:elements][:slots].push( @@ -89,6 +97,14 @@ class CartItem::Reservation < CartItem::BaseItem real_price end + def get_prepaid_minutes(user, priceable) + user_packs = PrepaidPackService.user_packs(user, priceable) + total_available = user_packs.map { |up| up.prepaid_pack.minutes }.reduce(:+) || 0 + total_used = user_packs.map(&:minutes_used).reduce(:+) || 0 + + total_available - total_used + end + ## # Compute the number of remaining hours in the users current credits (for machine or space) ## From 20bd3931d493f9c92115dad27674f95cd4fa5a69 Mon Sep 17 00:00:00 2001 From: Sylvain Date: Wed, 30 Jun 2021 09:18:06 +0200 Subject: [PATCH 48/57] [bug] public list of plans fails to render if a group has no plans --- CHANGELOG.md | 1 + app/frontend/src/javascript/components/plans/plans-list.tsx | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 820d11082..1ea4bd39f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,7 @@ - Fix a bug: unable to filter by multiple user IDs in OpenAPI - Fix a bug: do not display two empty categories in the plan creation form - Fix a bug: do not return to the home page when clicking on previous in the machine description page +- Fix a bug: public list of plans fails to render if a group has no plans - Tests for OpenAPI user trainings - [TODO DEPLOY] `rails db:seed` - [TODO DEPLOY] `rails fablab:maintenance:rebuild_stylesheet` diff --git a/app/frontend/src/javascript/components/plans/plans-list.tsx b/app/frontend/src/javascript/components/plans/plans-list.tsx index d68c0fcfe..a2c3c62cb 100644 --- a/app/frontend/src/javascript/components/plans/plans-list.tsx +++ b/app/frontend/src/javascript/components/plans/plans-list.tsx @@ -231,7 +231,7 @@ const PlansList: React.FC = ({ onError, onPlanSelection, onLogin return (

{ groupName(groupId) }

- {renderPlansByCategory(plansByGroup)} + {plansByGroup && renderPlansByCategory(plansByGroup)}
) })} From 6c326c7209d758ba062e021cc17e9a8a75a034d7 Mon Sep 17 00:00:00 2001 From: Sylvain Date: Wed, 30 Jun 2021 10:53:05 +0200 Subject: [PATCH 49/57] compute price according to prepaid hours Also: handle prepaid hours decreasing when used --- .../prepaid-packs/packs-summary.tsx | 29 +++++++++++--- .../javascript/controllers/machines.js.erb | 11 +++++ app/frontend/templates/machines/reserve.html | 3 +- app/models/cart_item/reservation.rb | 26 ++++++------ app/models/shopping_cart.rb | 9 +++++ app/services/invoices_service.rb | 2 +- app/services/prepaid_pack_service.rb | 40 +++++++++++++++++++ config/locales/app.logged.en.yml | 1 + config/locales/en.yml | 2 +- 9 files changed, 100 insertions(+), 23 deletions(-) diff --git a/app/frontend/src/javascript/components/prepaid-packs/packs-summary.tsx b/app/frontend/src/javascript/components/prepaid-packs/packs-summary.tsx index 3e5d70478..f5354f2fd 100644 --- a/app/frontend/src/javascript/components/prepaid-packs/packs-summary.tsx +++ b/app/frontend/src/javascript/components/prepaid-packs/packs-summary.tsx @@ -24,9 +24,10 @@ interface PacksSummaryProps { operator: User, onError: (message: string) => void, onSuccess: (message: string) => void, + refresh?: Promise } -const PacksSummaryComponent: React.FC = ({ item, itemType, customer, operator, onError, onSuccess }) => { +const PacksSummaryComponent: React.FC = ({ item, itemType, customer, operator, onError, onSuccess, refresh }) => { const { t } = useTranslation('logged'); const [userPacks, setUserPacks] = useState>(null); @@ -42,10 +43,23 @@ const PacksSummaryComponent: React.FC = ({ item, itemType, cu useEffect(() => { if (_.isEmpty(customer)) return; + getUserPacksData(); + }, [item, itemType, customer]); + + useEffect(() => { + if (refresh instanceof Promise) { + refresh.then(getUserPacksData); + } + }, [refresh]); + + /** + * Fetch the user packs data from the API + */ + const getUserPacksData = (): void => { UserPackAPI.index({ user_id: customer.id, priceable_type: itemType, priceable_id: item.id }) .then(data => setUserPacks(data)) .catch(error => onError(error)); - }, [item, itemType, customer]); + } /** * Total of minutes used by the customer @@ -108,7 +122,10 @@ const PacksSummaryComponent: React.FC = ({ item, itemType, cu

{t('app.logged.packs_summary.prepaid_hours')}

- {t('app.logged.packs_summary.remaining_HOURS', { HOURS: totalHours(), ITEM: itemType })} + + {totalHours() > 0 && t('app.logged.packs_summary.remaining_HOURS', { HOURS: totalHours(), ITEM: itemType })} + {totalHours() === 0 && t('app.logged.packs_summary.no_hours', { ITEM: itemType })} + {shouldDisplayButton() &&
}> {t('app.logged.packs_summary.buy_a_new_pack')} @@ -128,12 +145,12 @@ const PacksSummaryComponent: React.FC = ({ item, itemType, cu ); } -export const PacksSummary: React.FC = ({ item, itemType, customer, operator, onError, onSuccess }) => { +export const PacksSummary: React.FC = ({ item, itemType, customer, operator, onError, onSuccess, refresh }) => { return ( - + ); } -Application.Components.component('packsSummary', react2angular(PacksSummary, ['item', 'itemType', 'customer', 'operator', 'onError', 'onSuccess'])); +Application.Components.component('packsSummary', react2angular(PacksSummary, ['item', 'itemType', 'customer', 'operator', 'onError', 'onSuccess', 'refresh'])); diff --git a/app/frontend/src/javascript/controllers/machines.js.erb b/app/frontend/src/javascript/controllers/machines.js.erb index eed36ed6e..4b4a795cc 100644 --- a/app/frontend/src/javascript/controllers/machines.js.erb +++ b/app/frontend/src/javascript/controllers/machines.js.erb @@ -415,6 +415,9 @@ Application.Controllers.controller('ReserveMachineController', ['$scope', '$stat // current machine to reserve $scope.machine = machinePromise; + // will be set to a Promise and resolved after the payment is sone + $scope.afterPaymentPromise = null; + // fullCalendar (v2) configuration $scope.calendarConfig = CalendarConfig({ minTime: moment.duration(moment(settingsPromise.booking_window_start).format('HH:mm:ss')), @@ -618,6 +621,14 @@ Application.Controllers.controller('ReserveMachineController', ['$scope', '$stat } refetchCalendar(); + + // trigger the refresh of react components + setTimeout(() => { + $scope.afterPaymentPromise = new Promise(resolve => { + resolve(); + }); + $scope.$apply(); + }, 50); }); }; diff --git a/app/frontend/templates/machines/reserve.html b/app/frontend/templates/machines/reserve.html index 23c03e5dd..f8c6b5000 100644 --- a/app/frontend/templates/machines/reserve.html +++ b/app/frontend/templates/machines/reserve.html @@ -34,7 +34,8 @@ customer="ctrl.member" operator="currentUser" on-error="onError" - on-success="onSuccess"> + on-success="onSuccess" + refresh="afterPaymentPromise"> = slot_minutes + consumed = slot_minutes + consumed = options[:prepaid][:minutes] if slot_minutes > options[:prepaid][:minutes] + real_price = (slot_minutes - consumed) * (slot_rate / MINUTES_PER_HOUR) + options[:prepaid][:minutes] -= consumed end unless options[:elements].nil? @@ -97,14 +103,6 @@ class CartItem::Reservation < CartItem::BaseItem real_price end - def get_prepaid_minutes(user, priceable) - user_packs = PrepaidPackService.user_packs(user, priceable) - total_available = user_packs.map { |up| up.prepaid_pack.minutes }.reduce(:+) || 0 - total_used = user_packs.map(&:minutes_used).reduce(:+) || 0 - - total_available - total_used - end - ## # Compute the number of remaining hours in the users current credits (for machine or space) ## diff --git a/app/models/shopping_cart.rb b/app/models/shopping_cart.rb index a32fa5a17..0a90a7161 100644 --- a/app/models/shopping_cart.rb +++ b/app/models/shopping_cart.rb @@ -56,6 +56,7 @@ class ShoppingCart objects.push(save_item(item)) end update_credits(objects) + update_packs(objects) payment = create_payment_document(price, objects, payment_id, payment_type) WalletService.debit_user_wallet(payment, @customer) @@ -119,4 +120,12 @@ class ShoppingCart UsersCredits::Manager.new(reservation: r).update_credits end end + + # Handle the update of the user's prepaid-packs + # The total booked minutes are subtracted from the user's prepaid minutes + def update_packs(objects) + objects.filter { |o| o.is_a? Reservation }.each do |reservation| + PrepaidPackService.update_user_minutes(@customer, reservation) + end + end end diff --git a/app/services/invoices_service.rb b/app/services/invoices_service.rb index 6e46eaf73..055fa7fd8 100644 --- a/app/services/invoices_service.rb +++ b/app/services/invoices_service.rb @@ -190,7 +190,7 @@ class InvoicesService invoice.invoice_items.push InvoiceItem.new( amount: payment_details[:elements][:pack], - description: I18n.t('invoices.pack_item', COUNT: pack.prepaid_pack.minutes / 60), + description: I18n.t('invoices.pack_item', COUNT: pack.prepaid_pack.minutes / 60, ITEM: pack.prepaid_pack.priceable.name), object: pack, main: main ) diff --git a/app/services/prepaid_pack_service.rb b/app/services/prepaid_pack_service.rb index c57e2a8a0..8032955e0 100644 --- a/app/services/prepaid_pack_service.rb +++ b/app/services/prepaid_pack_service.rb @@ -1,5 +1,7 @@ # frozen_string_literal: true +SECONDS_PER_MINUTE = 60.0 + # Provides methods for PrepaidPack class PrepaidPackService class << self @@ -28,5 +30,43 @@ class PrepaidPackService .where('prepaid_packs.priceable_id = ?', priceable.id) .where('prepaid_packs.priceable_type = ?', priceable.class.name) end + + # subtract the number of used prepaid minutes from the user's count + def update_user_minutes(user, reservation) + # total number of minutes available in user's packs + available_minutes = minutes_available(user, reservation.reservable) + return if available_minutes.zero? + + # total number of minutes in the reservation's slots + slots_minutes = reservation.slots.map do |slot| + (slot.end_at.to_time - slot.start_at.to_time) / SECONDS_PER_MINUTE + end + reservation_minutes = slots_minutes.reduce(:+) || 0 + + # total number of prepaid minutes used by this reservation + consumed = reservation_minutes + consumed = available_minutes if reservation_minutes > available_minutes + + # subtract the consumed minutes for user's current packs + packs = user_packs(user, reservation.reservable).order(minutes_used: :desc) + packs.each do |pack| + pack_available = pack.prepaid_pack.minutes - pack.minutes_used + remaining = pack_available - consumed + remaining = 0 if remaining.negative? + pack_consumed = pack.prepaid_pack.minutes - remaining + pack.update_attributes(minutes_used: pack_consumed) + + consumed -= pack_consumed + end + end + + ## Total number of prepaid minutes available + def minutes_available(user, priceable) + user_packs = user_packs(user, priceable) + total_available = user_packs.map { |up| up.prepaid_pack.minutes }.reduce(:+) || 0 + total_used = user_packs.map(&:minutes_used).reduce(:+) || 0 + + total_available - total_used + end end end diff --git a/config/locales/app.logged.en.yml b/config/locales/app.logged.en.yml index 7d3f4502e..df0c17c53 100644 --- a/config/locales/app.logged.en.yml +++ b/config/locales/app.logged.en.yml @@ -194,6 +194,7 @@ en: packs_summary: prepaid_hours: "Prepaid hours" remaining_HOURS: "You have {HOURS} prepaid hours remaining for this {ITEM, select, Machine{machine} Space{space} other{}}." + no_hours: "You don't have any prepaid hours for this {ITEM, select, Machine{machine} Space{space} other{}}." buy_a_new_pack: "Buy a new pack" #book a training trainings_reserve: diff --git a/config/locales/en.yml b/config/locales/en.yml index 03993db1a..a53d56744 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -114,7 +114,7 @@ en: invoice_text_example: "Our association is not subject to VAT" error_invoice: "Erroneous invoice. The items below ware not booked. Please contact the FabLab for a refund." prepaid_pack: "Prepaid pack of hours" - pack_item: "Pack of %{COUNT} hours" + pack_item: "Pack of %{COUNT} hours for the %{ITEM}" #PDF payment schedule generation payment_schedules: schedule_reference: "Payment schedule reference: %{REF}" From d43f719038241b8f21458a2250e92d65fddf8652 Mon Sep 17 00:00:00 2001 From: Sylvain Date: Wed, 30 Jun 2021 15:32:10 +0200 Subject: [PATCH 50/57] buy packs using local payment --- .../src/javascript/api/local-payment.ts | 13 ++ .../payment-schedule-summary.tsx | 26 +--- .../payment-schedules-table.tsx | 30 +--- .../payment/abstract-payment-modal.tsx | 50 ++++--- .../local-payment/local-payment-form.tsx | 138 ++++++++++++++++++ .../local-payment/local-payment-modal.tsx | 76 ++++++++++ .../payzen/payzen-card-update-modal.tsx | 3 +- .../components/payment/payzen/payzen-form.tsx | 5 +- .../prepaid-packs/propose-packs-modal.tsx | 31 ++-- .../pricing/configure-packs-button.tsx | 13 +- .../components/pricing/editable-price.tsx | 10 +- .../src/javascript/components/wallet-info.tsx | 17 +-- .../javascript/controllers/machines.js.erb | 3 +- app/frontend/src/javascript/lib/format.ts | 20 +++ app/frontend/src/javascript/lib/user.ts | 22 +++ app/frontend/src/stylesheets/application.scss | 1 + .../local-payment/local-payment-modal.scss | 9 ++ config/locales/app.admin.en.yml | 9 ++ 18 files changed, 367 insertions(+), 109 deletions(-) create mode 100644 app/frontend/src/javascript/api/local-payment.ts create mode 100644 app/frontend/src/javascript/components/payment/local-payment/local-payment-form.tsx create mode 100644 app/frontend/src/javascript/components/payment/local-payment/local-payment-modal.tsx create mode 100644 app/frontend/src/javascript/lib/format.ts create mode 100644 app/frontend/src/javascript/lib/user.ts create mode 100644 app/frontend/src/stylesheets/modules/payment/local-payment/local-payment-modal.scss diff --git a/app/frontend/src/javascript/api/local-payment.ts b/app/frontend/src/javascript/api/local-payment.ts new file mode 100644 index 000000000..670a7eac8 --- /dev/null +++ b/app/frontend/src/javascript/api/local-payment.ts @@ -0,0 +1,13 @@ +import apiClient from './clients/api-client'; +import { AxiosResponse } from 'axios'; +import { ShoppingCart } from '../models/payment'; +import { PaymentSchedule } from '../models/payment-schedule'; +import { Invoice } from '../models/invoice'; + +export default class LocalPaymentAPI { + static async confirmPayment (cart_items: ShoppingCart): Promise { + const res: AxiosResponse = await apiClient.post('/api/local_payment/confirm_payment', cart_items); + return res?.data; + } +} + diff --git a/app/frontend/src/javascript/components/payment-schedule/payment-schedule-summary.tsx b/app/frontend/src/javascript/components/payment-schedule/payment-schedule-summary.tsx index b6bde67a4..3e217cc59 100644 --- a/app/frontend/src/javascript/components/payment-schedule/payment-schedule-summary.tsx +++ b/app/frontend/src/javascript/components/payment-schedule/payment-schedule-summary.tsx @@ -1,16 +1,14 @@ import React, { useState } from 'react'; import { useTranslation } from 'react-i18next'; import { react2angular } from 'react2angular'; -import moment from 'moment'; import '../../lib/i18n'; import { Loader } from '../base/loader'; import { FabModal } from '../base/fab-modal'; -import { IFablab } from '../../models/fablab'; import { PaymentSchedule } from '../../models/payment-schedule'; import { IApplication } from '../../models/application'; +import FormatLib from '../../lib/format'; declare var Application: IApplication; -declare var Fablab: IFablab; interface PaymentScheduleSummaryProps { schedule: PaymentSchedule @@ -25,18 +23,6 @@ const PaymentScheduleSummary: React.FC = ({ schedul // is open, the modal dialog showing the full details of the payment schedule? const [modal, setModal] = useState(false); - /** - * Return the formatted localized date for the given date - */ - const formatDate = (date: Date): string => { - return Intl.DateTimeFormat().format(moment(date).toDate()); - } - /** - * Return the formatted localized amount for the given price (eg. 20.5 => "20,50 €") - */ - const formatPrice = (price: number): string => { - return new Intl.NumberFormat(Fablab.intl_locale, {style: 'currency', currency: Fablab.intl_currency}).format(price); - } /** * Test if all payment deadlines have the same amount */ @@ -58,7 +44,7 @@ const PaymentScheduleSummary: React.FC = ({ schedul {hasEqualDeadlines() &&
  • - {t('app.shared.cart.NUMBER_monthly_payment_of_AMOUNT', { NUMBER: schedule.items.length, AMOUNT: formatPrice(schedule.items[0].amount) })} + {t('app.shared.cart.NUMBER_monthly_payment_of_AMOUNT', { NUMBER: schedule.items.length, AMOUNT: FormatLib.price(schedule.items[0].amount) })} {t('app.shared.cart.first_debit')}
    • @@ -66,12 +52,12 @@ const PaymentScheduleSummary: React.FC = ({ schedul {!hasEqualDeadlines() &&
    • {t('app.shared.cart.monthly_payment_NUMBER', { NUMBER: 1 })} - {formatPrice(schedule.items[0].amount)} + {FormatLib.price(schedule.items[0].amount)} {t('app.shared.cart.debit')}
    • - {t('app.shared.cart.NUMBER_monthly_payment_of_AMOUNT', { NUMBER: schedule.items.length - 1, AMOUNT: formatPrice(schedule.items[1].amount) })} + {t('app.shared.cart.NUMBER_monthly_payment_of_AMOUNT', { NUMBER: schedule.items.length - 1, AMOUNT: FormatLib.price(schedule.items[1].amount) })}
    } @@ -80,9 +66,9 @@ const PaymentScheduleSummary: React.FC = ({ schedul
      {schedule.items.map(item => (
    • - {formatDate(item.due_date)} + {FormatLib.date(item.due_date)} - {formatPrice(item.amount)} + {FormatLib.price(item.amount)}
      • ))}
    diff --git a/app/frontend/src/javascript/components/payment-schedule/payment-schedules-table.tsx b/app/frontend/src/javascript/components/payment-schedule/payment-schedules-table.tsx index 84e294af2..ce1afadf3 100644 --- a/app/frontend/src/javascript/components/payment-schedule/payment-schedules-table.tsx +++ b/app/frontend/src/javascript/components/payment-schedule/payment-schedules-table.tsx @@ -1,7 +1,6 @@ import React, { ReactEventHandler, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { Loader } from '../base/loader'; -import moment from 'moment'; import _ from 'lodash'; import { FabButton } from '../base/fab-button'; import { FabModal } from '../base/fab-modal'; @@ -9,11 +8,9 @@ import { UpdateCardModal } from '../payment/update-card-modal'; import { StripeElements } from '../payment/stripe/stripe-elements'; import { StripeConfirm } from '../payment/stripe/stripe-confirm'; import { User, UserRole } from '../../models/user'; -import { IFablab } from '../../models/fablab'; import { PaymentSchedule, PaymentScheduleItem, PaymentScheduleItemState } from '../../models/payment-schedule'; import PaymentScheduleAPI from '../../api/payment-schedule'; - -declare var Fablab: IFablab; +import FormatLib from '../../lib/format'; interface PaymentSchedulesTableProps { paymentSchedules: Array, @@ -57,19 +54,6 @@ const PaymentSchedulesTableComponent: React.FC = ({ return showExpanded.get(paymentScheduleId); } - /** - * Return the formatted localized date for the given date - */ - const formatDate = (date: Date): string => { - return Intl.DateTimeFormat().format(moment(date).toDate()); - } - /** - * Return the formatted localized amount for the given price (eg. 20.5 => "20,50 €") - */ - const formatPrice = (price: number): string => { - return new Intl.NumberFormat(Fablab.intl_locale, {style: 'currency', currency: Fablab.intl_currency}).format(price); - } - /** * Return the value for the CSS property 'display', for the payment schedule deadlines */ @@ -369,8 +353,8 @@ const PaymentSchedulesTableComponent: React.FC = ({ {expandCollapseIcon(p.id)} {p.reference} - {formatDate(p.created_at)} - {formatPrice(p.total)} + {FormatLib.date(p.created_at)} + {FormatLib.price(p.total)} {showCustomer && {p.user.name}} {downloadButton(TargetType.PaymentSchedule, p.id)} @@ -389,8 +373,8 @@ const PaymentSchedulesTableComponent: React.FC = ({ {_.orderBy(p.items, 'due_date').map(item => - {formatDate(item.due_date)} - {formatPrice(item.amount)} + {FormatLib.date(item.due_date)} + {FormatLib.price(item.amount)} {formatState(item)} {itemButtons(item, p)} )} @@ -414,8 +398,8 @@ const PaymentSchedulesTableComponent: React.FC = ({ confirmButton={t('app.shared.schedules_table.confirm_button')}> {tempDeadline && {t('app.shared.schedules_table.confirm_check_cashing_body', { - AMOUNT: formatPrice(tempDeadline.amount), - DATE: formatDate(tempDeadline.due_date) + AMOUNT: FormatLib.price(tempDeadline.amount), + DATE: FormatLib.date(tempDeadline.due_date) })} } diff --git a/app/frontend/src/javascript/components/payment/abstract-payment-modal.tsx b/app/frontend/src/javascript/components/payment/abstract-payment-modal.tsx index e6b345d9b..5fe8d739a 100644 --- a/app/frontend/src/javascript/components/payment/abstract-payment-modal.tsx +++ b/app/frontend/src/javascript/components/payment/abstract-payment-modal.tsx @@ -5,7 +5,6 @@ import { WalletInfo } from '../wallet-info'; import { FabModal, ModalSize } from '../base/fab-modal'; import { HtmlTranslate } from '../base/html-translate'; import { CustomAsset, CustomAssetName } from '../../models/custom-asset'; -import { IFablab } from '../../models/fablab'; import { ShoppingCart } from '../../models/payment'; import { PaymentSchedule } from '../../models/payment-schedule'; import { User } from '../../models/user'; @@ -17,8 +16,7 @@ import SettingAPI from '../../api/setting'; import { SettingName } from '../../models/setting'; import { ComputePriceResult } from '../../models/price'; import { Wallet } from '../../models/wallet'; - -declare var Fablab: IFablab; +import FormatLib from '../../lib/format'; export interface GatewayFormProps { @@ -28,7 +26,7 @@ export interface GatewayFormProps { customer: User, operator: User, className?: string, - paymentSchedule?: boolean, + paymentSchedule?: PaymentSchedule, cart?: ShoppingCart, formId: string, } @@ -46,6 +44,9 @@ interface AbstractPaymentModalProps { formId: string, className?: string, formClassName?: string, + title?: string, + preventCgv?: boolean, + modalSize?: ModalSize, } /** @@ -54,7 +55,7 @@ interface AbstractPaymentModalProps { * This component must not be called directly but must be extended for each implemented payment gateway * @see https://reactjs.org/docs/composition-vs-inheritance.html */ -export const AbstractPaymentModal: React.FC = ({ isOpen, toggleModal, afterSuccess, cart, currentUser, schedule, customer, logoFooter, GatewayForm, formId, className, formClassName }) => { +export const AbstractPaymentModal: React.FC = ({ isOpen, toggleModal, afterSuccess, cart, currentUser, schedule, customer, logoFooter, GatewayForm, formId, className, formClassName, title, preventCgv, modalSize }) => { // customer's wallet const [wallet, setWallet] = useState(null); // server-computed price with all details @@ -78,7 +79,7 @@ export const AbstractPaymentModal: React.FC = ({ isOp /** - * When the component is loaded first, get the name of the currently active payment modal + * When the component loads first, get the name of the currently active payment modal */ useEffect(() => { CustomAssetAPI.get(CustomAssetName.CgvFile).then(asset => setCgv(asset)); @@ -100,8 +101,7 @@ export const AbstractPaymentModal: React.FC = ({ isOp setWallet(wallet); PriceAPI.compute(cart).then((res) => { setPrice(res); - const wLib = new WalletLib(wallet); - setRemainingPrice(wLib.computeRemainingPrice(res.price)); + setRemainingPrice(new WalletLib(wallet).computeRemainingPrice(res.price)); setReady(true); }) }) @@ -118,7 +118,7 @@ export const AbstractPaymentModal: React.FC = ({ isOp * Check if the user accepts the Terms of Sales document */ const hasCgv = (): boolean => { - return cgv != null; + return cgv != null && !preventCgv; } /** @@ -135,13 +135,6 @@ export const AbstractPaymentModal: React.FC = ({ isOp return schedule !== undefined; } - /** - * Return the formatted localized amount for the given price (eg. 20.5 => "20,50 €") - */ - const formatPrice = (amount: number): string => { - return new Intl.NumberFormat(Fablab.intl_locale, {style: 'currency', currency: Fablab.intl_currency}).format(amount); - } - /** * Set the component as 'currently submitting' */ @@ -175,12 +168,23 @@ export const AbstractPaymentModal: React.FC = ({ isOp return !submitState && terms; } + /** + * Build the modal title. If the provided title is a shared translation key, interpolate it through the + * translation service. Otherwise, just display the provided string. + */ + const getTitle = (): string => { + if (title.match(/^app\.shared\./)) { + return t(title); + } + return title; + } + return ( - @@ -194,7 +198,7 @@ export const AbstractPaymentModal: React.FC = ({ isOp formId={formId} cart={cart} customer={customer} - paymentSchedule={isPaymentSchedule()}> + paymentSchedule={schedule}> {hasErrors() &&
    {errors}
    } @@ -214,7 +218,7 @@ export const AbstractPaymentModal: React.FC = ({ isOp disabled={!canSubmit()} form={formId} className="validate-btn"> - {t('app.shared.payment.confirm_payment_of_', { AMOUNT: formatPrice(remainingPrice) })} + {t('app.shared.payment.confirm_payment_of_', { AMOUNT: FormatLib.price(remainingPrice) })} } {submitState &&
    @@ -225,3 +229,9 @@ export const AbstractPaymentModal: React.FC = ({ isOp ); } + +AbstractPaymentModal.defaultProps = { + title: 'app.shared.payment.online_payment', + preventCgv: false, + modalSize: ModalSize.medium +}; diff --git a/app/frontend/src/javascript/components/payment/local-payment/local-payment-form.tsx b/app/frontend/src/javascript/components/payment/local-payment/local-payment-form.tsx new file mode 100644 index 000000000..220d489ad --- /dev/null +++ b/app/frontend/src/javascript/components/payment/local-payment/local-payment-form.tsx @@ -0,0 +1,138 @@ +import React, { FormEvent, useState } from 'react'; +import Select from 'react-select'; +import { useTranslation } from 'react-i18next'; +import { GatewayFormProps } from '../abstract-payment-modal'; +import LocalPaymentAPI from '../../../api/local-payment'; +import FormatLib from '../../../lib/format'; +import SettingAPI from '../../../api/setting'; +import { SettingName } from '../../../models/setting'; +import { PaymentModal } from '../payment-modal'; +import { PaymentSchedule } from '../../../models/payment-schedule'; + + +const ALL_SCHEDULE_METHODS = ['card', 'check'] as const; +type scheduleMethod = typeof ALL_SCHEDULE_METHODS[number]; + +/** + * Option format, expected by react-select + * @see https://github.com/JedWatson/react-select + */ +type selectOption = { value: scheduleMethod, label: string }; + +/** + * A form component to ask for confirmation before cashing a payment directly at the FabLab's reception. + * This is intended for use by privileged users. + * The form validation button must be created elsewhere, using the attribute form={formId}. + */ +export const LocalPaymentForm: React.FC = ({ onSubmit, onSuccess, onError, children, className, paymentSchedule, cart, customer, operator, formId }) => { + + const { t } = useTranslation('admin'); + + const [method, setMethod] = useState('check'); + const [onlinePaymentModal, setOnlinePaymentModal] = useState(false); + + /** + * Open/closes the online payment modal, used to collect card credentials when paying the payment schedule by card. + */ + const toggleOnlinePaymentModal = (): void => { + setOnlinePaymentModal(!onlinePaymentModal); + } + + /** + * Convert all payement methods for schedules to the react-select format + */ + const buildMethodOptions = (): Array => { + return ALL_SCHEDULE_METHODS.map(i => methodToOption(i)); + } + + /** + * Convert the given payment-method to the react-select format + */ + const methodToOption = (value: scheduleMethod): selectOption => { + if (!value) return { value, label: '' }; + + return { value, label: t(`app.admin.local_payment.method_${value}`) }; + } + + + /** + * Callback triggered when the user selects a payment method for the current payment schedule. + */ + const handleUpdateMethod = (option: selectOption) => { + setMethod(option.value); + } + + /** + * Handle the submission of the form. It will process the local payment. + */ + const handleSubmit = async (event: FormEvent): Promise => { + event.preventDefault(); + onSubmit(); + + if (paymentSchedule && method === 'card') { + // check that the online payment is active + try { + const online = await SettingAPI.get(SettingName.OnlinePaymentModule); + if (online.value !== 'true') { + return onError(t('app.admin.local_payment.online_payment_disabled')) + } + return toggleOnlinePaymentModal(); + } catch (e) { + onError(e); + } + } + + try { + const document = await LocalPaymentAPI.confirmPayment(cart); + onSuccess(document); + } catch (e) { + onError(e); + } + } + + /** + * Callback triggered after a successful payment by online card for a schedule. + */ + const afterCreatePaymentSchedule = (document: PaymentSchedule) => { + toggleOnlinePaymentModal(); + onSuccess(document); + } + + return ( +
    + {!paymentSchedule &&

    {t('app.admin.local_payment.about_to_cash')}

    } + {paymentSchedule &&
    +
    + {method === 'card' &&

    {t('app.admin.local_payment.card_collection_info')}

    } {method === 'check' &&

    {t('app.admin.local_payment.check_collection_info', { DEADLINES: paymentSchedule.items.length })}

    } @@ -115,7 +117,7 @@ export const LocalPaymentForm: React.FC = ({ onSubmit, onSucce
      {paymentSchedule.items.map(item => { return ( -
    • +
    • {FormatLib.date(item.due_date)} {FormatLib.price(item.amount)} diff --git a/app/frontend/src/javascript/components/payment/local-payment/local-payment-modal.tsx b/app/frontend/src/javascript/components/payment/local-payment/local-payment-modal.tsx index 88a340952..08e4e00b9 100644 --- a/app/frontend/src/javascript/components/payment/local-payment/local-payment-modal.tsx +++ b/app/frontend/src/javascript/components/payment/local-payment/local-payment-modal.tsx @@ -7,7 +7,11 @@ import { User } from '../../../models/user'; import { Invoice } from '../../../models/invoice'; import { useTranslation } from 'react-i18next'; import { ModalSize } from '../../base/fab-modal'; +import { Loader } from '../../base/loader'; +import { react2angular } from 'react2angular'; +import { IApplication } from '../../../models/application'; +declare var Application: IApplication; interface LocalPaymentModalProps { isOpen: boolean, @@ -22,7 +26,7 @@ interface LocalPaymentModalProps { /** * This component enables a privileged user to confirm a local payments. */ -export const LocalPaymentModal: React.FC = ({ isOpen, toggleModal, afterSuccess, cart, currentUser, schedule, customer }) => { +const LocalPaymentModalComponent: React.FC = ({ isOpen, toggleModal, afterSuccess, cart, currentUser, schedule, customer }) => { const { t } = useTranslation('admin'); @@ -71,6 +75,17 @@ export const LocalPaymentModal: React.FC = ({ isOpen, to schedule={schedule} GatewayForm={renderForm} modalSize={schedule ? ModalSize.large : ModalSize.medium} - preventCgv /> + preventCgv + preventScheduleInfo /> ); } + +export const LocalPaymentModal: React.FC = ({ isOpen, toggleModal, afterSuccess, currentUser, schedule , cart, customer }) => { + return ( + + + + ); +} + +Application.Components.component('localPaymentModal', react2angular(LocalPaymentModal, ['isOpen', 'toggleModal', 'afterSuccess', 'currentUser', 'schedule', 'cart', 'customer'])); diff --git a/app/frontend/src/javascript/directives/cart.js b/app/frontend/src/javascript/directives/cart.js index fbbb180ff..3a69039d9 100644 --- a/app/frontend/src/javascript/directives/cart.js +++ b/app/frontend/src/javascript/directives/cart.js @@ -79,6 +79,12 @@ Application.Directives.directive('cart', ['$rootScope', '$uibModal', 'dialogs', cartItems: undefined }; + // offline payments (at the fablab's reception) + $scope.localPayment = { + showModal: false, + cartItems: undefined + }; + // currently logged-in user $scope.currentUser = $rootScope.currentUser; @@ -325,6 +331,19 @@ Application.Directives.directive('cart', ['$rootScope', '$uibModal', 'dialogs', }, 50); }; + /** + * This will open/close the local payment modal + */ + $scope.toggleLocalPaymentModal = (beforeApply) => { + setTimeout(() => { + $scope.localPayment.showModal = !$scope.localPayment.showModal; + if (typeof beforeApply === 'function') { + beforeApply(); + } + $scope.$apply(); + }, 50); + }; + /** * Invoked atfer a successful card payment * @param invoice {*} may be an Invoice or a paymentSchedule @@ -334,6 +353,15 @@ Application.Directives.directive('cart', ['$rootScope', '$uibModal', 'dialogs', afterPayment(invoice); }; + /** + * Invoked atfer a successful offline payment + * @param invoice {*} may be an Invoice or a paymentSchedule + */ + $scope.afterLocalPaymentSuccess = (invoice) => { + $scope.toggleLocalPaymentModal(); + afterPayment(invoice); + }; + /** * Invoked when something wrong occurred during the payment dialog initialization * @param message {string} @@ -717,195 +745,14 @@ Application.Directives.directive('cart', ['$rootScope', '$uibModal', 'dialogs', }); } }; + /** * Open a modal window that allows the user to process a local payment for his current shopping cart (admin only). */ const payOnSite = function (items) { - $uibModal.open({ - templateUrl: '/shared/valid_reservation_modal.html', - size: $scope.schedule.payment_schedule ? 'lg' : 'sm', - resolve: { - price () { - return Price.compute(mkCartItems(items, '')).$promise; - }, - cartItems () { - return mkCartItems(items, ''); - }, - wallet () { - return Wallet.getWalletByUser({ user_id: $scope.user.id }).$promise; - }, - coupon () { - return $scope.coupon.applied; - }, - selectedPlan () { - return $scope.selectedPlan; - }, - schedule () { - return $scope.schedule; - }, - user () { - return $scope.user; - }, - settings () { - return $scope.settings; - } - }, - controller: ['$scope', '$uibModalInstance', '$state', 'price', 'Auth', 'LocalPayment', 'wallet', 'helpers', '$filter', 'coupon', 'selectedPlan', 'schedule', 'cartItems', 'user', 'settings', - function ($scope, $uibModalInstance, $state, price, Auth, LocalPayment, wallet, helpers, $filter, coupon, selectedPlan, schedule, cartItems, user, settings) { - // user wallet amount - $scope.wallet = wallet; - - // Global price (total of all items) - $scope.price = price.price; - - // Price to pay (wallet deducted) - $scope.amount = helpers.getAmountToPay(price.price, wallet.amount); - - // Reservation &| subscription - $scope.cartItems = cartItems; - - // Subscription - $scope.plan = selectedPlan; - - // Used in wallet info template to interpolate some translations - $scope.numberFilter = $filter('number'); - - // Shows the schedule info in the modal - $scope.schedule = schedule.payment_schedule; - - // how should we collect payments for the payment schedule - $scope.method = { - payment_method: 'card' - }; - - // "valid" Button label - $scope.validButtonName = ''; - - // online payment modal state - // this is used to collect card data when a payment-schedule was selected, and paid with a card - $scope.isOpenOnlinePaymentModal = false; - - // the customer - $scope.user = user; - - /** - * Check if the shopping cart contains a reservation - * @return {Reservation|boolean} - */ - $scope.reservation = (function () { - const item = cartItems.items.find(i => i.reservation); - if (item && item.reservation.slots_attributes.length > 0) { - return item.reservation; - } - return false; - })(); - - /** - * Check if the shopping cart contains a subscription - * @return {Subscription|boolean} - */ - $scope.subscription = (function () { - const item = cartItems.items.find(i => i.subscription); - if (item && item.subscription.plan_id) { - return item.subscription; - } - return false; - })(); - - /** - * Callback to process the local payment, triggered on button click - */ - $scope.ok = function () { - if ($scope.schedule && $scope.method.payment_method === 'card') { - // check that the online payment is enabled - if (settings.online_payment_module !== 'true') { - return growl.error(_t('app.shared.cart.online_payment_disabled')); - } else { - return $scope.toggleOnlinePaymentModal(); - } - } - $scope.attempting = true; - LocalPayment.confirm(cartItems, function (reservation) { - $uibModalInstance.close(reservation); - $scope.attempting = true; - }, function (response) { - $scope.alerts = []; - $scope.alerts.push({ msg: _t('app.shared.cart.a_problem_occurred_during_the_payment_process_please_try_again_later'), type: 'danger' }); - $scope.attempting = false; - }); - }; - /** - * Callback to close the modal without processing the payment - */ - $scope.cancel = function () { $uibModalInstance.dismiss('cancel'); }; - - /** - * Asynchronously updates the status of the online payment modal - */ - $scope.toggleOnlinePaymentModal = function () { - setTimeout(() => { - $scope.isOpenOnlinePaymentModal = !$scope.isOpenOnlinePaymentModal; - $scope.$apply(); - }, 50); - }; - - /** - * After creating a payment schedule by card, from an administrator. - * @param result {*} PaymentSchedule - */ - $scope.afterCreatePaymentSchedule = function (result) { - $scope.toggleOnlinePaymentModal(); - $uibModalInstance.close(result); - }; - - /** - * Invoked when something wrong occurred during the payment dialog initialization - * @param message {string} - */ - $scope.onCreatePaymentScheduleError = (message) => { - growl.error(message); - }; - - /* PRIVATE SCOPE */ - - /** - * Kind of constructor: these actions will be realized first when the directive is loaded - */ - const initialize = function () { - $scope.$watch('method.payment_method', function (newValue) { - $scope.validButtonName = computeValidButtonName(); - $scope.cartItems.payment_method = newValue; - }); - }; - - /** - * Compute the Label of the confirmation button - */ - const computeValidButtonName = function () { - let method = ''; - if ($scope.schedule) { - if (AuthService.isAuthorized(['admin', 'manager']) && $rootScope.currentUser.id !== cartItems.customer_id) { - method = $scope.method.payment_method; - } else { - method = 'card'; - } - } - if ($scope.amount > 0) { - return _t('app.shared.cart.confirm_payment_of_html', { METHOD: method, AMOUNT: $filter('currency')($scope.amount) }); - } else { - if ((price.price > 0) && ($scope.wallet.amount === 0)) { - return _t('app.shared.cart.confirm_payment_of_html', { METHOD: method, AMOUNT: $filter('currency')(price.price) }); - } else { - return _t('app.shared.buttons.confirm'); - } - } - }; - - // # !!! MUST BE CALLED AT THE END of the controller - initialize(); - } - ] - }).result.finally(null).then(function (paymentSchedule) { afterPayment(paymentSchedule); }); + $scope.toggleLocalPaymentModal(() => { + $scope.localPayment.cartItems = mkCartItems(items); + }); }; /** diff --git a/app/frontend/src/stylesheets/modules/payment/local-payment/local-payment-modal.scss b/app/frontend/src/stylesheets/modules/payment/local-payment/local-payment-modal.scss index ecee01edf..18624f22c 100644 --- a/app/frontend/src/stylesheets/modules/payment/local-payment/local-payment-modal.scss +++ b/app/frontend/src/stylesheets/modules/payment/local-payment/local-payment-modal.scss @@ -1,4 +1,28 @@ .local-payment-modal { + + .local-payment-form { + .payment-schedule { + display: flex; + + .schedule-method, + .full-schedule { + width: 50%; + } + + .schedule-method { + p { + margin-top: 12px; + } + } + + .full-schedule { + ul { + list-style: none; + } + } + } + } + .local-modal-icons { text-align: center; diff --git a/app/frontend/templates/shared/_cart.html b/app/frontend/templates/shared/_cart.html index 35dc247f0..3e48a4363 100644 --- a/app/frontend/templates/shared/_cart.html +++ b/app/frontend/templates/shared/_cart.html @@ -209,3 +209,13 @@ customer="user" schedule="schedule.payment_schedule"/>
    + +
    + +
    diff --git a/config/locales/app.admin.en.yml b/config/locales/app.admin.en.yml index d9fd2e477..27965d13d 100644 --- a/config/locales/app.admin.en.yml +++ b/config/locales/app.admin.en.yml @@ -1360,7 +1360,7 @@ en: category_deleted: "The category was successfully deleted" unable_to_delete: "Unable to delete the category: " local_payment: - offline_payment: "Offline payment" + offline_payment: "Payment on site" about_to_cash: "You're about to confirm the cashing by an external payment mean. Please do not click on the button below until you have fully cashed the requested payment." payment_method: "Payment method" method_card: "Online by card" From fb3bbacaf04fdf45d62973ef3c14f2a4ad2c26ee Mon Sep 17 00:00:00 2001 From: Sylvain Date: Wed, 30 Jun 2021 16:58:16 +0200 Subject: [PATCH 52/57] handle no packs available for the customer --- .../components/prepaid-packs/packs-summary.tsx | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) diff --git a/app/frontend/src/javascript/components/prepaid-packs/packs-summary.tsx b/app/frontend/src/javascript/components/prepaid-packs/packs-summary.tsx index f5354f2fd..5bbd87b55 100644 --- a/app/frontend/src/javascript/components/prepaid-packs/packs-summary.tsx +++ b/app/frontend/src/javascript/components/prepaid-packs/packs-summary.tsx @@ -12,6 +12,8 @@ import { ProposePacksModal } from './propose-packs-modal'; import { Loader } from '../base/loader'; import { react2angular } from 'react2angular'; import { IApplication } from '../../models/application'; +import { PrepaidPack } from '../../models/prepaid-pack'; +import PrepaidPackAPI from '../../api/prepaid-pack'; declare var Application: IApplication; @@ -30,6 +32,7 @@ interface PacksSummaryProps { const PacksSummaryComponent: React.FC = ({ item, itemType, customer, operator, onError, onSuccess, refresh }) => { const { t } = useTranslation('logged'); + const [packs, setPacks] = useState>(null); const [userPacks, setUserPacks] = useState>(null); const [threshold, setThreshold] = useState(null); const [packsModal, setPacksModal] = useState(false); @@ -41,10 +44,8 @@ const PacksSummaryComponent: React.FC = ({ item, itemType, cu }, []); useEffect(() => { - if (_.isEmpty(customer)) return; - getUserPacksData(); - }, [item, itemType, customer]); + }, [customer, item, itemType]); useEffect(() => { if (refresh instanceof Promise) { @@ -56,9 +57,14 @@ const PacksSummaryComponent: React.FC = ({ item, itemType, cu * Fetch the user packs data from the API */ const getUserPacksData = (): void => { + if (_.isEmpty(customer)) return; + UserPackAPI.index({ user_id: customer.id, priceable_type: itemType, priceable_id: item.id }) .then(data => setUserPacks(data)) .catch(error => onError(error)); + PrepaidPackAPI.index({ priceable_id: item.id, priceable_type: itemType, group_id: customer.group_id, disabled: false }) + .then(data => setPacks(data)) + .catch(error => onError(error)); } /** @@ -90,6 +96,8 @@ const PacksSummaryComponent: React.FC = ({ item, itemType, cu * Do we need to display the "buy new pack" button? */ const shouldDisplayButton = (): boolean => { + if (!packs?.length) return false; + if (threshold < 1) { return totalAvailable() - totalUsed() <= totalAvailable() * threshold; } @@ -117,6 +125,8 @@ const PacksSummaryComponent: React.FC = ({ item, itemType, cu // prevent component rendering if no customer selected if (_.isEmpty(customer)) return
    ; + // prevent component rendering if ths customer have no packs and there are no packs available + if (totalHours() === 0 && packs?.length === 0) return
    ; return (
    From 9f408f0a46d618827d04d44146e0b2a5730c91d8 Mon Sep 17 00:00:00 2001 From: Sylvain Date: Wed, 30 Jun 2021 17:16:41 +0200 Subject: [PATCH 53/57] norwegian language --- CHANGELOG.md | 7 +- config/initializers/locale.rb | 1 + config/locales/rails.no.yml | 221 ++++++++++++++++++++++++++++++++++ doc/environment.md | 2 +- 4 files changed, 227 insertions(+), 4 deletions(-) create mode 100644 config/locales/rails.no.yml diff --git a/CHANGELOG.md b/CHANGELOG.md index 1ea4bd39f..abc3eff67 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,10 +1,12 @@ # Changelog Fab-manager +- Prepaid packs of hours for the machines +- Tests for OpenAPI user trainings +- Norwegian language - Fix a bug: unable to filter by multiple user IDs in OpenAPI - Fix a bug: do not display two empty categories in the plan creation form - Fix a bug: do not return to the home page when clicking on previous in the machine description page - Fix a bug: public list of plans fails to render if a group has no plans -- Tests for OpenAPI user trainings - [TODO DEPLOY] `rails db:seed` - [TODO DEPLOY] `rails fablab:maintenance:rebuild_stylesheet` @@ -273,6 +275,7 @@ - Fix a bug: unable to create a coupon on stripe - Fix a bug: no notifications for refunds generated on wallet credit - Fix a bug: in staging environments, emails are not sent +- Fix a bug: unable to configure the app to use a german locale - Fix a security issue: updated carrierwave to 2.1.1 to fix [CVE-2021-21305](https://cve.mitre.org/cgi-bin/cvename.cgi?name=CVE-2021-21305) - [TODO DEPLOY] `rails fablab:maintenance:rebuild_stylesheet` - [TODO DEPLOY] `rails fablab:stripe:set_product_id` @@ -284,8 +287,6 @@ - [TODO DEPLOY] `\curl -sSL https://raw.githubusercontent.com/sleede/fab-manager/master/scripts/mount-payment-schedules.sh | bash` - [TODO DEPLOY] -> (only dev) `bundle install` -- Fix a bug: unable to configure the app to use a german locale - ## v4.6.6 2021 February 02 - Full German translation (thanks to [@korrupt](https://crowdin.com/profile/korrupt)) - OpenAPI endpoints to create/update/show/delete machines diff --git a/config/initializers/locale.rb b/config/initializers/locale.rb index 07b6b4f88..48de3f109 100644 --- a/config/initializers/locale.rb +++ b/config/initializers/locale.rb @@ -5,6 +5,7 @@ I18n.config.available_locales += %i[de de-AT de-CH de-DE en en-AU en-CA en-GB en-IE en-IN en-NZ en-US en-ZA fr fa-CA fr-CH fr-CM fr-FR es es-419 es-AR es-CL es-CO es-CR es-DO es-EC es-ES es-MX es-PA es-PE es-US es-VE + nb pt pt-BR zu] # we allow the Zulu locale (zu) as it is used for In-Context translation diff --git a/config/locales/rails.no.yml b/config/locales/rails.no.yml new file mode 100644 index 000000000..c8c99c900 --- /dev/null +++ b/config/locales/rails.no.yml @@ -0,0 +1,221 @@ +--- +nb: + activerecord: + errors: + messages: + record_invalid: 'Det oppstod feil: %{errors}' + restrict_dependent_destroy: + has_one: Kan ikke slette registreringen, fordi 1 %{record} avhenger av denne. + has_many: Kan ikke slette registreringen, fordi %{record} avhenger av denne. + date: + abbr_day_names: + - søn + - man + - tir + - ons + - tor + - fre + - lør + abbr_month_names: + - + - jan + - feb + - mar + - apr + - mai + - jun + - jul + - aug + - sep + - okt + - nov + - des + day_names: + - søndag + - mandag + - tirsdag + - onsdag + - torsdag + - fredag + - lørdag + formats: + default: "%d.%m.%Y" + long: "%e. %B %Y" + short: "%e. %b" + month_names: + - + - januar + - februar + - mars + - april + - mai + - juni + - juli + - august + - september + - oktober + - november + - desember + order: + - :day + - :month + - :year + datetime: + distance_in_words: + about_x_hours: + one: rundt 1 time + other: rundt %{count} timer + about_x_months: + one: rundt 1 måned + other: rundt %{count} måneder + about_x_years: + one: rundt 1 år + other: rundt %{count} år + almost_x_years: + one: nesten 1 år + other: nesten %{count} år + half_a_minute: et halvt minutt + less_than_x_seconds: + one: mindre enn 1 sekund + other: mindre enn %{count} sekunder + less_than_x_minutes: + one: mindre enn 1 minutt + other: mindre enn %{count} minutter + over_x_years: + one: over 1 år + other: over %{count} år + x_seconds: + one: 1 sekund + other: "%{count} sekunder" + x_minutes: + one: 1 minutt + other: "%{count} minutter" + x_days: + one: 1 dag + other: "%{count} dager" + x_months: + one: 1 måned + other: "%{count} måneder" + x_years: + one: 1 år + other: "%{count} år" + prompts: + second: sekund + minute: minutt + hour: time + day: dag + month: måned + year: år + errors: + format: "%{attribute} %{message}" + messages: + accepted: må være akseptert + blank: kan ikke være tom + confirmation: er ikke lik %{attribute} + empty: kan ikke være tom + equal_to: må være lik %{count} + even: må være partall + exclusion: er reservert + greater_than: må være større enn %{count} + greater_than_or_equal_to: må være større enn eller lik %{count} + inclusion: er ikke inkludert i listen + invalid: er ugyldig + less_than: må være mindre enn %{count} + less_than_or_equal_to: må være mindre enn eller lik %{count} + model_invalid: 'Det oppstod feil: %{errors}' + not_a_number: er ikke et tall + not_an_integer: er ikke et heltall + odd: må være oddetall + other_than: kan ikke være nøyaktig %{count} + present: må være tom + required: må eksistere + taken: er allerede i bruk + too_long: + one: er for lang (maksimalt 1 tegn) + other: er for lang (maksimalt %{count} tegn) + too_short: + one: er for kort (minst 1 tegn) + other: er for kort (minst %{count} tegn) + wrong_length: + one: har feil lengde (må være 1 tegn) + other: har feil lengde (må være %{count} tegn) + template: + body: 'Det oppstod problemer med følgende felt:' + header: + one: Kunne ikke lagre %{model} på grunn av én feil. + other: Kunne ikke lagre %{model} på grunn av %{count} feil. + helpers: + select: + prompt: Vennligst velg + submit: + create: Lag %{model} + submit: Lagre %{model} + update: Oppdater %{model} + number: + currency: + format: + delimiter: " " + format: "%n %u" + precision: 2 + separator: "," + significant: false + strip_insignificant_zeros: false + unit: kr + format: + delimiter: " " + precision: 2 + separator: "," + significant: false + strip_insignificant_zeros: true + human: + decimal_units: + format: "%n %u" + units: + billion: + one: milliard + other: milliarder + million: + one: million + other: millioner + quadrillion: + one: billiard + other: billiarder + thousand: tusen + trillion: + one: billion + other: billioner + unit: '' + format: + delimiter: " " + precision: 1 + significant: false + strip_insignificant_zeros: true + storage_units: + format: "%n %u" + units: + byte: + one: Byte + other: Bytes + gb: GB + kb: kB + mb: MB + tb: TB + percentage: + format: + delimiter: '' + format: "%n%" + precision: + format: + delimiter: '' + support: + array: + last_word_connector: " og " + two_words_connector: " og " + words_connector: ", " + time: + am: '' + formats: + default: "%A, %e. %B %Y, %H:%M" + long: "%A, %e. %B %Y, %H:%M" + short: "%e. %B, %H:%M" + pm: '' diff --git a/doc/environment.md b/doc/environment.md index 288a07ec2..a2d1a6794 100644 --- a/doc/environment.md +++ b/doc/environment.md @@ -159,7 +159,7 @@ Please, be aware that **the configured locale will imply the CURRENCY symbol use _Eg.: configuring **es-ES** will set the currency symbol to **€** but **es-MX** will set **$** as currency symbol, so setting the `RAILS_LOCALE` to simple **es** (without country indication) will probably not do what you expect._ Available values: `en, en-AU-CA, en-GB, en-IE, en-IN, en-NZ, en-US, en-ZA, fr, fa-CA, fr-CH, fr-CM, fr-FR, es, es-419, es-AR, es-CL, es-CO, es-CR, es-DO, - es-EC, es-ES, es-MX, es-MX, es-PA, es-PE, es-US, es-VE, pt, pt-BR, zu`. + es-EC, es-ES, es-MX, es-MX, es-PA, es-PE, es-US, es-VE, no, pt, pt-BR, zu`. Default is **en**. If your locale is not present in that list or any locale doesn't have your exact expectations, please open a pull request to share your modifications with the community and obtain a rebuilt docker image. From b6f3fa399ac20d6ecfc0922338024a5988071a67 Mon Sep 17 00:00:00 2001 From: Sylvain Date: Wed, 30 Jun 2021 17:24:01 +0200 Subject: [PATCH 54/57] fix norwegian locale + updated a translation --- config/initializers/locale.rb | 2 +- config/locales/app.admin.en.yml | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/config/initializers/locale.rb b/config/initializers/locale.rb index 48de3f109..ffaba7cf5 100644 --- a/config/initializers/locale.rb +++ b/config/initializers/locale.rb @@ -5,7 +5,7 @@ I18n.config.available_locales += %i[de de-AT de-CH de-DE en en-AU en-CA en-GB en-IE en-IN en-NZ en-US en-ZA fr fa-CA fr-CH fr-CM fr-FR es es-419 es-AR es-CL es-CO es-CR es-DO es-EC es-ES es-MX es-PA es-PE es-US es-VE - nb + no pt pt-BR zu] # we allow the Zulu locale (zu) as it is used for In-Context translation diff --git a/config/locales/app.admin.en.yml b/config/locales/app.admin.en.yml index 27965d13d..37e3f689e 100644 --- a/config/locales/app.admin.en.yml +++ b/config/locales/app.admin.en.yml @@ -307,7 +307,7 @@ en: prominence: "Prominence" price: "Price" machine_hours: "Machine slots" - prices_calculated_on_hourly_rate_html: "All the prices will be automatically calculated based on the hourly rate defined here.
    For example, if you define an hourly rate at {RATE}: a slot of {DURATION} minutes (default), will be charged {PRICE}." + prices_calculated_on_hourly_rate_html: "All the prices will be automatically calculated based on the hourly rate defined here.
    For example, if you define an hourly rate at {RATE}: a slot of {DURATION} minutes, will be charged {PRICE}." you_can_override: "You can override this duration for each availability you create in the agenda. The price will then be adjusted accordingly." machines: "Machines" credits: "Credits" From 89a911c89756e6e474e739a1b625964bd2b90dfd Mon Sep 17 00:00:00 2001 From: Sylvain Date: Thu, 1 Jul 2021 08:49:59 +0200 Subject: [PATCH 55/57] fix translation --- config/locales/app.admin.en.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/config/locales/app.admin.en.yml b/config/locales/app.admin.en.yml index 37e3f689e..68001061b 100644 --- a/config/locales/app.admin.en.yml +++ b/config/locales/app.admin.en.yml @@ -370,7 +370,7 @@ en: status_all: "All" machines_pricing: prices_match_machine_hours_rates_html: "The prices below match one hour of machine usage, without subscription." - prices_calculated_on_hourly_rate_html: "All the prices will be automatically calculated based on the hourly rate defined here.
    For example, if you define an hourly rate at {RATE}: a slot of {DURATION} minutes (default), will be charged {PRICE}." + prices_calculated_on_hourly_rate_html: "All the prices will be automatically calculated based on the hourly rate defined here.
    For example, if you define an hourly rate at {RATE}: a slot of {DURATION} minutes, will be charged {PRICE}." you_can_override: "You can override this duration for each availability you create in the agenda. The price will then be adjusted accordingly." machines: "Machines" price_updated: "Price successfully updated" From e2ba4c6f2be8f0ceb9435d94e551bc4c0c06e9bf Mon Sep 17 00:00:00 2001 From: Sylvain Date: Thu, 1 Jul 2021 09:01:54 +0200 Subject: [PATCH 56/57] fix typo --- config/locales/app.admin.en.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/config/locales/app.admin.en.yml b/config/locales/app.admin.en.yml index 68001061b..309ddde02 100644 --- a/config/locales/app.admin.en.yml +++ b/config/locales/app.admin.en.yml @@ -1206,7 +1206,7 @@ en: statistics_module: "statistics module" upcoming_events_shown: "display limit for upcoming events" display_invite_to_renew_pack: "Display the invite to renew prepaid-packs" - packs_threshold_info_html: "You can define under how many hours the user will be invited to buy a prepaid-pack, if his stock of prepaid hours in under this threshold.
    You can set a number of hours (eg. 5) or a percentage of his current pack pack (eg. 0.05 means 5%)." + packs_threshold_info_html: "You can define under how many hours the user will be invited to buy a new prepaid-pack, if his stock of prepaid hours is under this threshold.
    You can set a number of hours (eg. 5) or a percentage of his current pack pack (eg. 0.05 means 5%)." renew_pack_threshold: "threshold for packs renewal" general: general: "General" From d1c7a9c44673382f036c80bee08da02a3a8ae0cc Mon Sep 17 00:00:00 2001 From: Sylvain Date: Thu, 1 Jul 2021 09:19:00 +0200 Subject: [PATCH 57/57] add missing tr key --- config/locales/en.yml | 1 + 1 file changed, 1 insertion(+) diff --git a/config/locales/en.yml b/config/locales/en.yml index a53d56744..bda3715f2 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -528,3 +528,4 @@ en: payzen_hmac: "PayZen HMAC-SHA-256 key" payzen_currency: "PayZen currency" public_agenda_module: "Public agenda module" + renew_pack_threshold: "Threshold for packs renewal"