✨ Introduce product-in-conversation Variant for Inline Product Display

[cristiantela]

Description

Type of Change

• • Bugfix
• • Feature
• • Code style update (formatting, local variables)
• • Refactoring (no functional changes, no api changes)
• • Tests
• • Other

Motivation and Context

Products shown directly inside the chat conversation needed a distinct layout from the catalog view — a grid layout that places the image alongside the title/price and moves the add-to-cart control below the content area, making it easier to interact with in a narrow conversation thread.

Additionally, the regular price was being rendered after the sale price, which reversed the expected visual hierarchy (original → discounted).

Summary of Changes

Feature — product-in-conversation variant (InlineProduct, ProductCatalog, ShowItems)

• Added a new product-in-conversation variant to InlineProduct that uses a CSS grid layout: the image spans two rows on the left, the title/price occupy the top-right cell, and the counter/add-to-cart button occupies the bottom-right cell.
• ProductCatalogItem accepts a new optional inConversation boolean prop that switches between product and product-in-conversation variants.
• ShowItems passes inConversation to ProductCatalogItem when rendering a single product in a conversation message.

Fix — price display order (PriceDisplay)

• Swapped the render order so the regular price appears first (visually on the left, typically shown as strikethrough/muted) followed by the sale price. This matches the conventional pricing layout (original price → discounted price).

Refactoring — layout config and className propagation (InlineProduct, CounterControls)

• Extracted a shared PRODUCT_LAYOUT constant to eliminate the duplication between the product and product-in-conversation variant configs.
• Moved className: 'weni-inline-product__counter-controls' into counterProps for product variants (consistent with how cart already handles it), and removed the class that was hardcoded directly inside CounterControls.
• Applied the className prop to the FSButton render path in CounterControls — previously it was silently ignored when the component rendered as a button instead of a stepper.

Demonstration