feat(backorders): BACK-655 render picklist backorder prompt on PDP

[agchan12]

What?

• Use the selected_picklist_options and picklist_products_details from POST /remote/v1/product-attributes/:productId and render a per picklist backorder prompt in addition to the main product stock on the Stencil PDP.

Requirements

• CHANGELOG.md entry added (required for code changes only)

Tickets / Documentation

Add links to any relevant tickets and documentation.

• BACK-655

Screenshots (if appropriate)

Display backorder prompt when picklist 'Adjust inventory for these products...' is selected

• Main product (103)
  • {on_hand: 10, backorder_limit: 15, backorder_message: 'Backorder message 1'}
  • Picklist_1 product (id: 80) - {on_hand: 0, backorder_limit: unlimited, backorder_message: 'Backorder message 1'}.
    • Adjust inventory for these products when purchased is enabled
  • Picklist_2 product (id: 80) - {on_hand: 0, backorder_limit: unlimited, backorder_message: 'Backorder message 1'}.
    • Adjust inventory for these products when purchased is enabled

BACK-655.mov

Explanation
When a picklist item is selected, the backorder prompt is displayed.

Display backorder prompt when picklist 'Adjust inventory for these products...' is NOT selected

• Main product (103)
  • {on_hand: 10, backorder_limit: 15, backorder_message: 'Backorder message 1'}
  • Picklist_1 product (id: 80) - {on_hand: 0, backorder_limit: unlimited, backorder_message: 'Backorder message 1'}.
    • Adjust inventory for these products when purchased is NOT enabled
  • Picklist_2 product (id: 80) - {on_hand: 0, backorder_limit: unlimited, backorder_message: 'Backorder message 1'}.
    • Adjust inventory for these products when purchased is NOT enabled

BACK-655-no-adjust.mov

Explanation
When a picklist item is selected, the backorder prompt is NOT displayed.

ping @bc-shawnwang @animesh1987 @bigcommerce/team-trac

[bc-shawnwang]

code LGTM and the two manual test cases is as expected.

[JessicaHu51]

hey a few edits:

1. in scenario 1, can we use the "picklist name" the merchant entered on the picklist editing page for the PDP backorder display? it's currently using the product name. so in your example it should show "**Bundle 1:** x will be backordered | Backorder message". picklist name should be in bold

2. in both scenarios, can we remove the parent product name? display the parent product's backorder info the same way as a simple product. this avoids repeating a long product name and aligns with how it's displayed in cart and the merchant facing workflow.

The above 2 are design change. Added a mockup below for intended display:

3. In scenario 1, please make sure only quantity on backorder and backorder message shows for picklist items. At 00:36 in the first video i can see the backorder availability prompt showing for Bundle 1 but it should only be the backorder message there

Thanks. let me know if anything isn't clear enough

cc @animesh1987

[bc-shawnwang]

@JessicaHu51 for your comment

"picklist name" the merchant entered on the picklist editing page for the PDP backorder display? it's currently using the product name. so in your example it should show "Bundle 1: x will be backordered | Backorder message"

Just remind this display is not accurate, and might not match the backorder prompts after added to cart. because it doesn't count the cart might already have same items.
e.g

apple has 5 onhand available and 100 backorder available

cart already have 6 x apple (5 on-hand 1 backordered). This is not considered on the PDP page (I think we decided not to calculate it, as luke recorded it somewhere in ADR). At least there is a slack thread on it: https://bigcommerce.slack.com/archives/C081DP3B6MV/p1762732177432859?thread_ts=1762728031.783749&cid=C081DP3B6MV

I raised this because I saw the ticket https://bigcommercecloud.atlassian.net/browse/BACK-627 seems it want to consider current cart status?

[bc-shawnwang]

https://bigcommercecloud.atlassian.net/browse/BACK-627

@JessicaHu51 also if you check the tickets and design screenshot, it did only per product (and no picklist name but product name displayed in the design), so are you sure it needs to be display per picklist items and display its picklist name? (for cart page I know its per picklist item, but can you check your design on PDP?)