Simple Payments: Widget

[rodrigoi]

Scenario

The user wants to add an existing Simple Payment button to the site sidebar, make changes to a published Payment Button, or create a new one.

Steps

Select the widget

Everything starts with either selecting an existing widget from a sidebar item, or adding a new one to one of the theme's sidebars.

To do so, the user has to:

• Open the Customizer
• Select Widgets and the Sidebar where the Payment Button widget is located, or were the user wants to add it.
• Search for the Simple Payments widget on the Add Widget panel, or find an existing widget to edit.
• Click on the arrow to expand the widget and make changes to it.

The customizer should display a drop down list of existing Payment Buttons, with the option to edit the selected item, or give the user the option to create a new one.

Add Existing Payment Button

To add an existing Payment Button as a widget, the user only needs to select it from the drop down list, where they will be listed by name. They have to be listed using the same sorting than the Simple Payments dialog on the Editor.

The changes are saved live, and the content of the selected payment button should show on the preview window. Only when the user publishes the customizer changes, they will show on the site.

Create a new Payment Button

The user should be allowed to create new Payment Button directly on the customizer in case there are none available, or no existing button satisfies the user requirement.

To do so, the user will have to:

• Click on the Add button below the drop down list.
• Complete the form with all the required information.
• Select an optional image from the media library.

While creating a new Payment Button, the drop down list of existing items should either be disabled or show a generic text for new items.
All changes should be live, and should reflect on the preview as the user fills the form.

When saving the new button, it will get added to the drop down list and it will marked as selected. The preview window should reflect this change.

Adding a Payment Button this way makes it live, and available on the Editor.

Edit an existing Payment Button

• Select the Payment Button from the drop down list.
• Click on the Edit button.
• A form with all the Payment button information will expand, allowing the user to perform the following actions:
  • Replace or Edit the image.
  • Update any of the fields.
  • Save the changes, discard them, or delete the Payment Button.

Form Actions

Image Actions

All the changes are saved when clicking the

Deleting an existing Payment Button

The edit action on the widget customizer allows the user to remove any existing Payment Button from the system.
Since this action is permanent and could potentially affect existing posts or pages, we need to display a confirm dialog.

Once the action is confirmed, the form should close, the Payment Button should be removed from the drop down list. The first element on the list is now the selected Payment Button, and the preview should reflect that change.

Tasks

I've created separate issues for technical tasks that will need to be completed for this flow to work.

• Customizer: Add Existing Simple Payment Button as Widget #24614 - Customizer: Add Existing Simple Payment Button as Widget
• Customizer: Simple Payments Widget UI #24902 - Customizer: Simple Payments Widget UI
• Customizer: Create a Simple Payments Button from the Customizer Widget UI #24676 - Customizer: Create a Simple Payments Button from the Customizer Widget UI
• Customizer: Edit existing Simple Payment Button on the Customizer UI #24693 - Customizer: Edit existing Simple Payment Button on the Customizer UI
• Customizer: remove Simple Payments Button #24694 - Customizer: remove Simple Payments Button

[rodrigoi]

Ready for Review on Automattic/jetpack#9782.

[rodrigoi]

Closed with WordPress.com release rWP178243 of D14005-code.