feat: add new condition options and improve UX & UI

[Soare-Robert-Daniel]

Summary

Added new condition options for Free and Pro users. Improved the UI and UX.

Checklist:

• Condition Target Select Input
  • Support for dynamic filtering based on operator compatibility with the field type
  • Complete compatibility list with all field types
• Condition Operator Select Input
  • Added new options
  • Locking for PRO options
• Comparision Value Input Fields
  • Change the field based on the operator type.
    • Simple text field for text-based and numeric-based comparison
    • Double numeric fields for between operator
    • Hide the field for operators that do not use a second comparison value (any, empty)
• Field Rendering
  • Render the dataset value user for an operator that uses a second comparison value (contains, not-contains, regex, etc )
  • Render the dataset value for between operator
  • Locking for PRO features

Important

The majority of the fields are not tracked by the conditions scripts. For them to work, we need to create more watchers tailored for each field.

Note

The code is very cumbersome, so much refactoring was done to simplify and better showcase the functionality.

Will affect visual aspect of the product

YES

Screenshots

Test instructions

Note

Not all fields are supported to be part of the conditions.

• Make some simple fields like text, select, radio.
• Add another field with conditions based on previously simple fields created.

Check before Pull Request is ready:

• I have written a test and included it in this PR
• I have run all tests and they pass
• The code passes when running the PHP CodeSniffer
• Code meets WordPress Coding Standards for PHP, HTML, CSS and JS
• Security and Sanitization requirements have been followed
• I have assigned a reviewer or two to review this PR (if you're not sure who to assign, we can do this step for you)

Closes https://github.com/Codeinwp/ppom-pro/issues/429

[pirate-bot]

Plugin build for fba815b is ready 🛎️!

• Download PPOM - build 🔗

[AndreeaCristinaRadacina]

@Soare-Robert-Daniel, here are my observations:

For text conditions:

• if you click on any of those three options (contains, does not contain, matches regex), a dropdown will appear, instead of a texarea - https://vertis.d.pr/v/kOycET
• there are some typos: does not contains -> does not contain; matchs regex -> matches RegEx
• can we grey out the Numeric and Select type field conditions when we have a text input? (only if it doesn't imply complications)

For number conditions:

• if you have two meta fields, like text and number, and you select the Number meta field, then click on one condition type (is odd), the number field will switch to the other meta field
• for the "between" type, I think we should call it "is between";
• also, there are no ranges, you only have a dropdown
• for "is multiple of number", we should either enlarge that space or write just "is multiple of"

The behavior is visible here - https://vertis.d.pr/v/A4wg2u

For Select conditions:

• instead of "not" we should say "is not"

• the greater than and less than should be moved to the numeric conditions
  

• Also, the phrase above the conditions should also contain an "if":
  

[Soare-Robert-Daniel]

• if you click on any of those three options (contains, does not contain, matches regex), a dropdown will appear, instead of a texarea - https://vertis.d.pr/v/kOycET
• also, there are no ranges, you only have a dropdown

Could not replicate.

• can we grey out the Numeric and Select type field conditions when we have a text input? (only if it doesn't imply complications)
• if you have two meta fields, like text and number, and you select the Number meta field, then click on one condition type (is odd), the number field will switch to the other meta field

I added auto-disable based on the field type on the target selector. Until now, it was based on operator value, but it is not a good UX. This should also fix the second problem.

• the greater than and less than should be moved to the numeric conditions

I moved to their categories, but for backward compatibility reasons, they will be only available to basic select type input.

• Also, the phrase above the conditions should also contain an "if":

Could not replicate. It should be like this:

[selul]

@Soare-Robert-Daniel

I added auto-disable based on the field type on the target selector. Until now, it was based on operator value, but it is not a good UX. This should also fix the second problem.

Can't we just hide them, i.e we can use display none on those options? Is not clear if those are disabled since they are not available or not available in the plan.

For PRO, once they are selected, instead of showing an empty select https://vertis.d.pr/i/PneRxH, we should display a CTA button with Upgrade to unlock. Any design can work.

[AndreeaCristinaRadacina]

@Soare-Robert-Daniel, now, the Greater than and Less than appear under numerical type, but they cannot be selected:

Also, when text is selected, the numerical conditions are still available:

[Soare-Robert-Daniel]

The new changes:

• Upsell for operators marked as PRO
• When pressing on Add Field, the conditions tabs will be hidden since the way the modal is created conflicts with some initializations.
• Rewordered the operator options.
• Improved the greater than and less than to work with both select types fields and text fields

[AndreeaCristinaRadacina]

Thank you, @Soare-Robert-Daniel!

Here are my observations:

• the conditions type dropdown is not big enough for the PRO conditions:
  

• if I add a new field and try to use it in the conditional display panel of another existing input, it will not appear in the dropdown, unless I save the fields. I am not sure if it's expected or not, but wanted to mention.

• I set the checkbox to appear is Text is empty, but even if I didn't type something, the checkbox is displayed:
  

• I set the checkbox to appear if text is greater than 2, I imagined it refers to 2 characters, but typed in 3 chars and it's still hidden; I also tried with 3 words, still not displayed. I also tried typing the number "3", and it appeared. However, this makes it similar to a number input; is this ok?

[AndreeaCristinaRadacina]

For number, no condition type is available:

For text, I made the condition for checkbox to appear if: Text contains ab; the checkbox is still not displayed:

It only works if I click somewhere outside the box. Can we do something more intuitive?

[Soare-Robert-Daniel]

New changes:

• added Number to the list of the observed fields for conditions
• Text and Number input checking is done now on typing instead of change (no longer need to click outside to the see the results )
• wider operator selector (and shorter value input since it needs to make to space to fit all)

Operator selection for text field type

Operator selection for number field type

Operator selection for select field type

[Soare-Robert-Daniel]

Added Email and Date as supported fields.

@selul @AndreeaCristinaRadacina Do you think that fields that are not supported should not be a part of the selector or should we show them as disabled (in the idea that it might be available in the future if they are asking for it)

[selul]

fields that dont supoort conditions should be removed from dropdown for now.

[Soare-Robert-Daniel]

Some important things to keep in mind.

In the released version (store version), the conditions work correctly only for the inputs Select, Radio, and Switcher on all operators. Checkbox works only with the is operator.

Thus, any new field and operator you see in this PR that is not mentioned above are new and not regressions.

Not all fields are supported, and from the supported fields, not all operators are compatible (technical or UX reasons).

New changes:

• is and is not are now available for supported text-based inputs and numeric inputs
• Checkbox supports only the operator is and is not.
• The fields table footer will only appear if you have more than 8 fields
• Various layout fixing

[pirate-bot]

🎉 This PR is included in version 33.0.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀