alfio-event / alf.io-public-frontend Goto Github PK

currently on master.

Currently, the globalErrors (with ErrorDescriptor type) don't display the arguments.

Currently not used, but could be useful

See #3. Currently they have been disabled. Search for [attr.maxlength]...

• vertical align Label, price and dropdown to the centre
• same font size for Label, price and dropdown
• display "{n.} tickets left" info if <10 tickets left
• make "sales end" less evident than the ticket description (text muted)

https://github.com/ngneat/transloco

the current language selector (which is the short 2 letter iso code) is not that comprehensible.

See https://uxdesign.cc/my-take-on-language-selectors-945caceb58f7 as an initial take on the issue, as improving our multi language capability is quite important!

See also:

• https://usersnap.com/blog/design-language-switch/
• ...

How to reproduce:

• complete a reservation
• add a new additional information, and mark it as required
• open the reservation page, try to update the ticket
  
• the PUT call produces an error response, which is not displayed by the application
  

We should display the privacy policy (if any) and t&c links in the event page, so that people can click and check them

• Move from Outline to Button Light
• On mobile homepage - Continue should be displayed before Back to the website, currently:

• On mobile - the same on the following page, invert Cancel and Continue
• On mobile - the same on the following page, invert Back to event site and Download your invoice
• On mobile - space out Back to event site and Download your invoice

We should restore the "expired categories" section on the event page.
This should be hidden if the DISPLAY_EXPIRED_CATEGORIES setting is false

We first need to wait the following dependencies:

• https://github.com/ng-bootstrap/ng-bootstrap#dependencies
• https://github.com/ng-select/ng-select#versions
• https://github.com/ngx-translate/core#installation (note, this may take some times, the project seems on hold?)
• https://github.com/FortAwesome/angular-fontawesome#compatibility-table

User should be able to select the country by typing the name of the country as well as its code

as the user will continually bounce from / to /event/my-event automatically

We are using it for only 2 components:

• ngbTooltip
• ngbRadioGroup+ngbButtonLabel+ngbButton

https://github.com/ngneat/transloco as ngx-translate is currently in limbo.

in the old version we have:

https://github.com/alfio-event/alf.io/blob/2.0-M1-1906.1/src/main/webapp/WEB-INF/templates/event/payment/paypal.ms

<div class="wMarginBottom wMarginTop text-muted">
    {{#i18n}}reservation-page.paypal.description{{/i18n}}
    {{#demoModeEnabled}}
        <p>{{#i18n}}reservation-page.paypal.demo [{{paypalTestUsername}}] [{{paypalTestPassword}}]{{/i18n}}</p>
    {{/demoModeEnabled}}
</div>
<script src="{{request.contextPath}}/resources/js/payment/paypal.js" defer async></script>

{{#tokenAcquired}}
    <div class="alert alert-success">
        <h3><i class="fa fa-check"></i> {{#i18n}}reservation-page.paypal.confirm{{/i18n}}</h3>
    </div>
{{/tokenAcquired}}

We must display the token acquired part

and in the overview page ( https://github.com/alfio-event/alf.io/blob/2.0-M1-1906.1/src/main/webapp/WEB-INF/templates/event/overview.ms ) the submit button is:

{{#tokenAcquired}}
  {{#i18n}}reservation-page.confirm-button{{/i18n}}
{{/tokenAcquired}}

"Do you have any promotional/partner code" becomes a link, aligned to the right.
By clicking on it an input field + "Apply" buttons are displayed in place of the link.

something generated like https://sharingbuttons.io/ .

Currently, in the language.guard.ts guard if no matches are present, it will pick the first one:

else {
      lang = availableLanguages[0];
    }

As an improved heuristic, we can first try to search for english, as it's normally the lingua franca.

As a future improvement, an Event could have a default language.

We first need to wait the following dependencies:

• https://github.com/ng-bootstrap/ng-bootstrap#dependencies
• https://github.com/ng-select/ng-select#versions
• https://github.com/ngx-translate/core#installation (note, this may take some times, the project seems on hold?)
• https://github.com/FortAwesome/angular-fontawesome#compatibility-table
• do the update :D
• fix ui
  • dismissable banner/alert: close icon is wrong
  • home page of event: select for ticket quantity is not styled (?)
  • check error: ERROR TypeError: Cannot read properties of undefined (reading 'termsAndConditionsUrl') at FooterLinksComponent_Template (footer-links.component.html:2:9)
  • attendee data, some col that should take 50% of space are placed one after the another
  • table alignemnt in summary is not respected: subtotal should be to the right
  • event page: the icon + text spacing is too much (organizer, when, location etc).
  • form: vertical spacing is much smaller, add g-2 in row WIP: candidates: waitingListForm in event-display.component, stripe-payment-proxy, poll-selection,
  • when logged, the drop down menu: in the text with icon is not aligned
  • spacing issue with checkbox / radio button
  • payment page: payment selector
  • order page: button for resending email alignement is not correct
  • when accepting the TOS/Conditions, the alignment of the text with the radiobutton are not correct, one has more space than the other
  • update ticket button is not fully aligned to the right
  • poll ui seems broken (?)
  • check mobile, the breakpoints are way differents
  • ...

It seems that even though the event does not have the fully configured invoice setting, it seems to be visible anyway in the ui.

But in the end, it will generate a receipt instead of the invoice requested by the user.

Check where is the inconsistency

The event list page will be changed in the following way: 2 sections.

First section "Events" with: up to next 4 events. If more -> display a "more" button.
Second section: "Subscriptions" with: up to 4 subscriptions. If more -> display a "more" button.

Create a new list all events page which is linked by the more button. -> display paginated 20 events(client side) + client side search
Create a new list all subscription page which is linked by the more button.

More compact event view.

We can also add the support of tags for filtering for events.

Options from Font Awesome free:

• edit
• check-square
• file-alt
• id-badge
• id-card
• receipt
• user-circle

There's a lot of white space available

that allows us to:

• increase the font size
• add space between icons and text
• add some air in between paragraphs

this is useful for sharing with the correct locale

• font size: try increasing 1px the font size of standard text
• font family: try with Source Sans Pro

• error handling (especially for the payment section)
• check: additional options availability messages in UI
• check show-event.ms : showNoCategoriesWarning, containsExpiredCategories
• stripe payment: we have still commented the address part in stripe-payment-proxy.component.ts (/*address: {) see https://github.com/alfio-event/alf.io-public-frontend/blob/master/src/app/payment/stripe-payment-proxy/stripe-payment-proxy.component.ts#L238

Additional fields:

• handle euVat correctly (!check)
• required/min/max length

note:

use of showNoCategoriesWarning :
https://github.com/alfio-event/alf.io/blob/2.0-M1-maintenance/src/main/webapp/WEB-INF/templates/event/show-event.ms#L125

use of containsExpiredCategories:
https://github.com/alfio-event/alf.io/blob/2.0-M1-maintenance/src/main/webapp/WEB-INF/templates/event/show-event.ms#L130

The ui does not show any warning message if there are ticket categories available.

Enable ivy, note: we have an issue with maxlength, see comment below.

As a workaround, we have removed them...

• Remove asterisk from mandatory fields and add "(optional)" instead to the optional fields
• Remove EMPTY option from mandatory select