New UI 2023

[OlegPhenomenon]

Tasks:

• Update auction UI

New approaches

• Using view_component, jsbuild, propshaft
• Was added new setting items
  • invoice_issuer_address
  • invoice_issuer_reg_no
  • invoice_issuer_vat_number
  • organization_phone

Pipeline

• Make migration
• Precompile assets

What has been done / needs to be done

• Updated auction page
• Updated my accounts page
• Updated my rates page
• Implemented modal windows
• Added filtering and search on the auctions page
• Connected the work of web sockets
• Connected automatic calculation of the amount of bets + tax
• Made it possible to bid for the English auction
• Implement autobidder
• Add notifications. I use toast js library to make notifications more beauty according design
• Implement show all button
• Implemented my offers page
• Implemented Tab feature
• Implemented invoices page
• Implement "Pay all unpaid invoices"
• Add sort feature for invoices table
• Pagination for invoices
• Show all for invoices
• Show all animation
• Handle modal window in mobile/table view. Maybe it should be as separate page, not a modal
• Implement notification page
• Need to add different icon types for different types of notifications
• Implement read feature for notifications(and read all)
• Implement blind auction bids
• Fix when modal window is open at the empty page without content
• Make columns as sortable in my offers page
• Finish complex sortable column as total in offer page
• Implement endpoint for show all in offers page
• at the moment to find the result by domain on the results page in the admin panel it is necessary to enter the full domain name, it should be changed so that it searches automatically and starts searching by the entered pattern.
• Add deposit view to auction list
• Configure mobile view (connect javascript actions)
• Block autobider toggle if price is less than minimum bid
• Implement page of versions
• Add timeleft for english auctions
• Add pagination, make according style
• Made the table as a customizable component
• Add sorting for table
• Fix "Show auctions with no start date" in admin panel. WHen in turn on, it works fine, but not work when rollback
• Implement admin auction page with all neccessary logic
• Make sort table in its own frame
• Update information about issuer in invoice details. Setting.find_by(code: 'invoice_issuer').retrieve - display all information about issuer in one line, but according by design there are should be different pieces of current information. For example, address, vat, reg number, issuer name should be as independence entities
• Some information may be missing, e.g. user has no notifications, accounts, bets. Then we should make some kind of a stopper, e.g. "no invoices"
• Enable captcha
• Deposit Invoice Show
• Localization
• User cache counter for counting
• Configure Turbo Drive
• Move UI logic into view components
• Get rid from presenters, because now logic in view components
• Get rid from comments code
• Get rid from packs directory
• Get rid from not-used localization
• Get rid from "dead" code
• Implement error handle pages - 404 and 500
• Fix webpush toggle value
• When autobidder is set, page is refreshed. It shouldn't be, need to use Turbo features
• Implement History page
• Strange sorting in auction
• Finish with sorting in order page
• Implement GDPR banner
• Implement timezone browser localization
  ...

How to test?

• Check the bids for the English auction
• Check the possibility of calculating the total amount of bets by entering the price of the bet, as well as switching the billing profile
• Check if web sockets work. NB! Make sure websockets don't send prohibited information, for example, users can't see what bids were made for a blind auction
• Check type of notifications. Depends of user is win or lost, should render different messages with differents icons
• Check how admin panel work (filters, set values for auctions, sorting and etc.)
• Check mobile view
• Check password handles(reset password, forget password, input new password, not received password etc.)

Security check

• some action restricted by javascript, but what if javascript is turn off?!
• check architecture design security
• websocket security
• Check in page "your offer". Does it really your offer or not? Also check: do web sockets change the behavior of this page?
• Check details for your offers what related to blind auction. There aren't be any of bids from another participants
• Need to put uuid of english auction to the endpoints what related for blind auction. Should be show 404 page
• If somebody another win, need to be sure that in offers another person won't see registration code
• Check recaptcha for blind offers, english offers and autobider
• check sorting, searching, flitering

[viezly]

This pull request is split into 81 parts for easier review.
👀 Review pull request on Viezly

Changed files are located in these folders:

• /
• app
• app/assets
• app/broadcasts
• app/components
• app/controllers
• app/helpers
• app/javascript
• app/jobs
• app/models
• app/packs/entrypoints/controllers
• app/services
• app/views
• bin
• config
• config/environments
• config/locales
• db
• test
• test/channel
• test/components
• test/fixtures
• test/integration
• test/services
• test/system

[vohmar]

Issues found so far:

• invoice view is missing invoice nr in the heading , lacks buttons and has a coloting inconsistency:
  

• no way to access invoice details view
  

• unable to change billing profile for an invoice
  

[vohmar]

• login view is missing the white shaded background boxes

• login tablet view has incorrect menu button, login blocks do not rearrange to tablet setup, phone/email contacts and social media icons are misaligned, plus some typos and small issues in the footer menu

• user profile view has text box around e-mail address that should not be there as its not possible to edit that value in the view, contact data is misaligned, the flip switches in the settings section have different shades of grey, few typos (same scaling issues in the tablet and mobile views like with the login screen)

• cannot access user profile editing view - returns an error: You are not authorized to access this page.

[vohmar]

• pay all invoices button throws an error and takes user back to the first tab. Also there should be no pay all button for paid and cancelled invoices

[vohmar]

index:

• we need to change the 3 tile info presentation a bit to also include the info about the registration process and terms and conditions
• in acution list the blind auctions offers are listed with 2 decimal places while the english ones have one.
• should probably change the types io and po to english alternatives in english view - ea and ba for example or perhaps just E and B?
• allignment issue in tablet view light blue contact block - the email and phone should be alligned by the address not be up there with the copyright. Sviiter fixed that in the code or not? Also the social media icons' allgnment in the tablet footer is still off as well. Plus the translation, typo and other allignemnt issues in the footer are still present. The contect of the footer can be pulled from the voog via an api like it is done with the currect auction if i am not mistaken. But the issues like FAQ and Stat links being in one line i guess need separata attention.

user profile:

• the flip switch buttons in the settings block are still different shades of grey. I guess this is because the user has an active ban and due to this they are denied to change the value of "Daily summary to email". Lets make this updateable as well and deny only updating personal and contact data

billing profiles:

• in tablet and mobile views the buttons delete+edit, confirm+cancel are spread out - should be places side by side like in desktop view
• cancel button for editing existing billing profile and new one are differnet colors. Also the right edge of the buttons appears to be cut off
• allignement of city, postl code and country is off. Plus in the edit box the country code dropbox appears twice

Invoices:

• pay button show 5 invoices to be paid - apparently the sum of overdue and cancelled invoices. The pay all button should not affect any invoices that are not listed in the view. So if the issed invoices tab is open then it should affect only those invoices. And there should be no option to pay cancelled invoices.