Multi tiers upgrade - part 2

[wordpressfan]

Description

Fixes #7177

UI changes for upgrade Multi tiers.

Type of change

• New feature (non-breaking change which adds functionality).

Detailed scenario

Everything is mentioned in the issue.

Technical description

Documentation

We added custom-select new stylying/scripts to be exactly as in the website.

New dependencies

No

Risks

No

Mandatory Checklist

Code validation

• I validated all the Acceptance Criteria. If possible, provide screenshots or videos.
• I triggered all changed lines of code at least once without new errors/warnings/notices.
• I implemented built-in tests to cover the new/changed code.

Code style

• I wrote a self-explanatory code about what it does.
• I protected entry points against unexpected inputs.
• I did not introduce unnecessary complexity.
• Output messages (errors, notices, logs) are explicit enough for users to understand the issue and are actionnable.

Unticked items justification

If some mandatory items are not relevant, explain why in this section.

Additional Checks

• In the case of complex code, I wrote comments to explain it.
• When possible, I prepared ways to observe the implemented system (logs, data, etc.).
• I added error handling logic when using functions that could throw errors (HTTP/API request, filesystem, etc.)

[wordpressfan]

@marija-nikolic attaching here how it looks like, please note that I mocked the prices and just added a few license types just for testing, so here we need a feedback on just the UI plz.

Without active promo campaign:
https://github.com/user-attachments/assets/11624c6f-75c6-4fcc-84aa-b4ddfd528d06

With active promo campaign:
https://github.com/user-attachments/assets/3396f180-2c67-4f2e-8df9-8ad260f33a51

Let me know if u see any UI issue that needs to be fixed.
Thanks.

[marija-nikolic]

@marija-nikolic attaching here how it looks like, please note that I mocked the prices and just added a few license types just for testing, so here we need a feedback on just the UI plz.

Without active promo campaign: https://github.com/user-attachments/assets/11624c6f-75c6-4fcc-84aa-b4ddfd528d06

With active promo campaign: https://github.com/user-attachments/assets/3396f180-2c67-4f2e-8df9-8ad260f33a51

Let me know if u see any UI issue that needs to be fixed. Thanks.

Thank you!
We should re-use the popup we have right now in the plugin and just edit the name/price/URL + add dropdown on Multi.

Screenshot of the current pop-up (for Single license):

For dropdown, you can do the same Nicolas did for the account page:

The dropdown should be narrower than the CTA, with a gray border around it (same line width and color as the large square).

[marija-nikolic]

@wordpressfan Here is how open dropdown looks like:

[wordpressfan]

Adjusted all the points mentioned above:

Without active promo campaign:

multi-tiers-part2-marija-v2-2024-12-19_02.53.23.mp4

With active promo campaign:

multi-tiers-part2-marija-v2-promo-2024-12-19_02.55.08.mp4

[marija-nikolic]

Adjusted all the points mentioned above:

Without active promo campaign:

multi-tiers-part2-marija-v2-2024-12-19_02.53.23.mp4
With active promo campaign:

multi-tiers-part2-marija-v2-promo-2024-12-19_02.55.08.mp4

Hi, thank you!

• Could you please ensure that the Growth and Multi boxes are the same height? It also looks like the alignment of the dropdown and CTA buttons could be slightly adjusted.

• Also Growth plan should be 10 websites, and in dropdown we should have 50/100/500 websites
  See the screenshot from the account page:

• Please adjust the space at the bottom of the dropdown and the text in the dropdown shouldn't be bolded (see the 2nd screenshot)- you can copy what we have on the account page

[marija-nikolic]

Same for the design with active promo banner, plus I noticed that dropdown is wider then it should be:

[wordpressfan]

Could you please ensure that the Growth and Multi boxes are the same height? It also looks like the alignment of the dropdown and CTA buttons could be slightly adjusted.

Both have the same height now:

The alignment with buttons are already in the center, I zoomed on them to show u.

Also Growth plan should be 10 websites, and in dropdown we should have 50/100/500 websites

As I mentioned above, it's all about the UI because I mocked the data for now, once getting the UI approved, we will get the real data from the API with the real numbers.

Please adjust the space at the bottom of the dropdown and the text in the dropdown shouldn't be bolded (see the 2nd screenshot)- you can copy what we have on the account page

I'm checking now the last point

[wordpressfan]

Screencast after latest changes:

multi-tiers-part2-marija-v3-2024-12-19_10.30.52.mp4

[marija-nikolic]

Thank you very much @wordpressfan

Please make sure that the open dropdown menu is not wider:

It seems the boxes are nearly square. Could you please check the height-to-width ratio and adjust it to match what we had before or use the ones on the account page as a reference?

[wordpressfan]

What do u think about that?

and

[marija-nikolic]

What do u think about that?

and

Thank you! Great! If you could just put them a bit closer, like it's on the current pop up:

[codacy-production]

Coverage summary from Codacy

See diff coverage on Codacy

Coverage variation	Diff coverage
✅ +0.05% (target: -0.10%)	✅ 86.44% (target: 50.00%)

Coverage variation details

	Coverable lines	Covered lines	Coverage
Common ancestor commit (12cea3d)	38201	16695	43.70%
Head commit (96e5bfd)	38231 (+30)	16727 (+32)	43.75% (+0.05%)

Coverage variation is the difference between the coverage for the head and common ancestor commits of the pull request branch: <coverage of head commit> - <coverage of common ancestor commit>

Diff coverage details

	Coverable lines	Covered lines	Diff coverage
Pull request (#7195)	59	51	86.44%

Diff coverage is the percentage of lines that are covered by tests out of the coverable lines that the pull request added or modified: <covered lines added or modified>/<coverable lines added or modified> * 100%

See your quality gate settings    Change summary preferences

_{Codacy stopped sending the deprecated coverage status on June 5th, 2024. Learn more}

[wordpressfan]

I'm going to merge this one and prepare the main feature PR description as @marija-nikolic approved the current screenshots/screencasts.