New promotion example

The new promotion form demonstrates a more complex layout for form content than the simpler lead form, and also demonstrates a wider variety of form inputs: text inputs, date inputs, segmented controls, radio buttons and an acknowledgement checkbox.

Validation

This form uses the Field validation API to prompt the user to fill out required fields and to ensure that values entered are within the expected range. The validation logic applied in this example has been intentionally kept simple to demonstrate the concepts.

Each field that requires validation accepts a touched prop and an error prop. These properties are used to determine whether or not to show an error and helps to avoid overwhelming users with error messages for fields they have not interacted with.

• The error provides a validation message to display to the user. The presence of a value indicates that the field is currently in an invalid state.
• The touched indicates that the user has interacted with or has visited the field. This let's us know that we're ready to display the validation outcome.

The code sample below demonstrates some example react hooks to maintain error and touched values for each field. In a real application, these functions would likely live in a separate module/package from the page. For example, both the Formik and Final Form libraries have similar React hooks for helping maintain the form state.

Composite component layouts

One detail to note is the use of nested layouts to organize the form content presenting the "Promotion value" inputs. Logically the page is presenting two controls under the label "Promotion Value". Semantically, the example code is presenting two separate components and visually hiding the label of one of them. While this does make the form submission simpler by exposing two separate values in the submitted result, there may be accessibility implications since the visible label only relates to one of the two inputs.

An alternative approach (not explored here) might instead use a custom input field to present both the text field and the segmented control under a single field label.

Code example

Preview

Code

Playroom

Back to Promotions

Create New Promo

Welcome to ezOrdering Promotions

Close

Create a promotion and share the code with your leads and customers. The promotion can be redeemed on orders placed through your ezOrdering page.

Learn more

Promo Overview

Promos are self-funded and are available for use within both ezOrdering and Direct Entry.

Promo Name

The name appears in ezManage and on customer receipts

Unique Promotion Code

The your customers will use to redeem the promotion

0/15

Promotion Value

Promotion value: unit

%$

Minimum Order Value (optional)

Promo Schedule

Promotions become active upon creation. Best practice for distribution and tracking is 12 weeks or less.

End Date

Eligible Days of the Week

Weekdays only

All days of the week

Customer Details

Redemptions per Customer

One per customer

Unlimited

Store Details

Participating Stores

All stores

Specific stores

I agree to fund this promotion

I understand that the value of the promotion will be removed from my payment runs from ezCater wherever the promotion has been applied. I am aware that I am responsible for funding and marketing promotion, and that I can cancel this promotion at any time. I understand that this promotion cannot be redeemed by customers on ezCater Marketplace.

Finalize Promotion

Cancel