feat: payment quantity selector

[KenLSM]

Problem

We currently use a combobox component for the quantity selector, here are the problems with it:

• When you input a number it searches and if the quantity is not allowed it will show 'No matching results'
• It doesn't tell the user what the maximum is
• Comboboxes on mobile is a problem for accessibility

Review the mini-PRD to better understand the UX behaviours

Closes FRM-1252

Solution

1. Added <PaymentQuantityModal /> under each <PaymentCard />
2. Swapped <ItemQuantity /> with <ItemQuantityButton />
3. Introduced selector-bottom size and selector for <Modal />

• this theme is turned on when the user is on a mobile phone to allow the modal to position itself at bottom of the page
• chosen to use size instead of variant as these themes are specific to breakpoints which is controlled by size

Breaking Changes

• No - this PR is backwards compatible

UI Changes

• <PaymentCard /> has its background removed as a move towards the new design. Notably the border hover/active is not updated as design is still figuring out the best interaction with the new quantity button

Bug Fixes:

• fixes label :focus border

Before & After Screenshots

Before
PaymentPreview

After
Mobile View

Desktop View

PaymentPreview

Tests

Payment Modal

Modal x PaymentCard data mutation, on admin

• Add product item with name: min qty 1 max qty 99, description: bar, amt: 1, multi_qty: min_qty: 1, max_qty: 99
• Ensure that PaymentCard has a quantity button with default Qty: 1
• Ensure that clicking on the quantity button brings up the modal
• Change the qty input to be 99
• Ensure that clicking on X button closes the modal
  • Quantity button on PaymentCard remains as Qty: 1
• Change the qty input to be 99
• Ensure that clicking on Cancel button closes the modal
  • Quantity button on PaymentCard remains as Qty: 1
• Change the qty input to be 99
• Ensure that clicking on 'Submit` button closes the modal
  • Quantity button on PaymentCard updates to Qty: 99
  • Total price on PaymentPreview updates to S$99.00

Modal x PaymentCard data mutation, on responder side

• Add product item with name: min qty 1 max qty 99, description: bar, amt: 1, multi_qty: min_qty: 1, max_qty: 99
• Make the form public and run the below tests as a responder
• Ensure that PaymentCard has a quantity button with default Qty: 1
• Ensure that clicking on the quantity button brings up the modal
• Change the qty input to be 99
• Ensure that clicking on 'Submit` button closes the modal
  • Quantity button on PaymentCard updates to Qty: 99
  • Total price on PaymentPreview updates to S$99.00
• Verify your email and proceed to the dedicate payment page
• Ensure that price remains as S$99.00

Item without multi_qty

• Add product item with name: no multi_qty, description: bar, multi_qty: toggled off
• Ensure that PaymentCard does not have any quantity button rendered

Item with min and max as 1

• Add product item with name: min qty 1 max qty 1, description: bar, multi_qty: toggled on, min_qty: 1, max_qty: 1
• Ensure that PaymentCard has a quantity button with default Qty: 1
• Ensure that clicking on the quantity button brings up the modal
• Ensure that Minus/Plus buttons are disabled and not interactable
• Delete the value on the input, and close the modal
• Open the modal again
• Ensure that the input is 1
• Delete the value on the input
• Ensure that the Plus button is enabled
• Click on the Plus button, and ensure that the quantity is now set to 1 (the min_qty)
• Ensure that Minus/Plus buttons are now disabled and not interactable

Item with non min of 1

• Add product item with name: min qty 2 max qty 99, description: bar, multi_qty: min_qty: 2, max_qty: 99
• Ensure that PaymentCard has a quantity button with default Qty: 2
• Ensure that Minus button is disabled and not interactable
• Delete the value on the input, and close the modal
• Open the modal again
• Ensure that the input is 2
• Delete the value on the input
• Ensure that the Plus button is enabled
• Click on the Plus button, and ensure that the quantity is now set to 2 (the min_qty)
• Set the input to be 99
• Ensure that the Plus button is now disabled, while Minus button remains enabled

Item quantity taking large width

• Add product item with name: min qty 1 max qty 200000, description: bar, amt: 1, multi_qty: min_qty: 1, max_qty: 200000
• Set input to be 200000
• Ensure that input width is not changed
• Ensure that clicking on 'Submit` button closes the modal
  • Quantity button on PaymentCard updates to Qty: 200000 with the button width increased to accommodate the values

Mobile View
On a mobile screen (<768px)

• Open the modal
• Observe that the modal is now at the bottom of the screen
• Ensure that clicking on the input brings up the number input keyboard

[wanlingt]

thanks Ken! some minor changes

[wanlingt]

lgtm!