Release: 3.20

Typed props, marketplace pages, and better DX

Front-Commerce 3.20 is a milestone release for TypeScript adoption: all PropTypes-based components in Theme Chocolatine have been migrated to TypeScript, and a new codemod helps integrators do the same in their projects. The Gezy Marketplace gains a dedicated merchant page and a merchant facet on listing pages. A new shared ESLint configuration package replaces the deprecated Remix-based setup and upgrades to ESLint 10. Finally, the order details page now displays shipments grouped by delivery, including a new virtual shipments section.

Let's dive into the details!

PropTypes to TypeScript migration

All Theme Chocolatine components that relied on PropTypes have been migrated to TypeScript. Every component now exports named TypeScript prop types (e.g., ButtonProps, ModalProps, SliderProps), Storybook stories have been migrated to CSF3 format, and PropTypes runtime validation has been removed.

These technical improvements allow to improve component discoverability and usage in your projects, and reduces the risk of regressions. It makes your projects upgrades safer.

• Atoms: Button, Icon, Stack, Body, Heading, Image, Link, Box, Rating, PriceFilter, ToggleButton and more
• Molecules: Alert variants, FormActions, DropDown, ExpandableCard, Paginator, OptionPicker, LabelledIcon, LinkList and more
• Organisms: Modal, RecapTable, Map, Lightbox, Slider, Breadcrumb, SteppedProgress, PostalAddressSelector and more
• Templates: MultiStep, FormattedDate
• Product & Cart: ProductView, CartContent, ImagesGallery and 21 components total
• Checkout: AddressRecap, CartRecap, Payment, PlaceOrder, ShippingMethod and all checkout flow components
• User, Newsletter, Wishlist, Wysiwyg: OrderRecap, OrderTable, Subscribe, WishlistProductGrid
• Account, Layout: Dashboard, AddressBook, Information, Orders, Header, TopBar, BottomBar
• Cross-package: Adyen, PayZen, Prismic, Magento2 PageBuilder, Adobe B2B RequisitionList, and compat formsy components

Refer to the migration guide for detailed instructions.

Gezy Marketplace: Merchant page

Buyers can now visit a dedicated merchant page displaying the merchant's profile (identity, description, ratings, location) and browse their product catalog with filters and pagination. The "Sold by" link on product offers navigates directly to this page.

• Merchant profile: buyers can visit a merchant's page to see their identity, description, ratings and location
• Product catalog: the merchant page includes a filtered and paginated product listing
• Merchant facet: product listing pages now expose a merchant filter so buyers can narrow results by seller
• Offer cards: product cards on listing pages display marketplace offers with price, merchant name and offers count

Order details: shipment-based display and virtual shipments

The order details page now groups items by shipment instead of showing a flat list, supporting multi-delivery, multi-package and multi-merchant scenarios. Each shipment displays its tracking information, shipping address and method. A new virtual shipments section handles downloadable products, subscriptions and other items that are never physically shipped.

Co-located GraphQL fragments for extension features

Extensions can now declare GraphQL fragments alongside their components using a new fragment field in feature registrations. Components can now be registered like this, and the Fragment is collocated with its component:

export default defineExtension({
  ...
  unstable_lifecycleHooks: {
    onFeaturesInit: (hooks) => {
      hooks.registerFeature("orderDetails", {
        ui: {
          constraints: { targetGraphQLType: "Order" },
          componentsMap: {
            OrderItems: {
              component: new URL(
                "./theme/modules/OrderItems/index.js",
                import.meta.url,
              ),
              fragment: new URL(
                "./theme/modules/OrderItems/OrderItemsFragment.gql",
                import.meta.url,
              ),
            },
          },
        },
      });
    },
  },
});

See Co-located GraphQL fragments for more details.

Other changes

Features

• Codemod:
  • We added a remove-prop-types motion to the 3.20.0 codemod transform that removes PropTypes imports, comments out assignments, and inserts TODO markers for TypeScript typing
  • We added a codemod to rename OrderDetails feature to orderDetails following the camelCase naming convention
• Core:
  • We added VirtualShipment type and Order.virtualShipments field to the GraphQL schema for virtual products
  • We added support for URL in the fragment field for extension features and content composition, allowing co-located .gql files
  • We added support for declaring GraphQL fragments on feature components
  • We added detection of duplicate extension registration at config-load time
  • We added detection of GraphQL namespace collisions at config-load time
  • We deprecated isShippable, shipping_address, and shipping_method_title on Order in favor of shipments
• ESLint:
  • We added the new @front-commerce/eslint-config package with flat config for ESLint 10
  • We added jsx-spread-before-fixed-props rule
  • We added feature-name-lowercase-first rule
• Gezy Marketplace:
  • We added a dedicated merchant page with profile, product catalog and filters
  • We added a merchant facet filter to product listing pages
  • We added marketplace offers display on product item cards
• Magento1:
  • We added warnings when unsupported product types (grouped, downloadable) are loaded
• Remix:
  • We enabled prefetch for dynamic routes
  • We added auto-inclusion of extension type declarations in generated tsconfig
• Theme Chocolatine:
  • We migrated all components from PropTypes to TypeScript across 11 phases, exporting named TypeScript prop types and migrating stories to CSF3
  • We added virtual shipments display on the order details page
  • We added shipment-based order display on order details

Improvements

• Codemod:
  • We improved actionable warning messages in SCSS and JS-to-JSX codemods with exact manual steps when the codemod cannot complete the migration automatically
• Core:
  • We enforced strict ExtensionFeatures typing via declaration merging
  • We fixed FeatureFlags type to use a flat Record<string, boolean> instead of the nested FeatureFlagMap

Bug Fixes

• Gezy:
  • We fixed an issue where adding a first item to cart would empty it due to stale Redis cache
  • We fixed an issue where the merchant was not pre-selected in the new conversation form
• Magento2:
  • We fixed an issue where virtual-only orders would generate an empty shipment
• Theme Chocolatine:
  • We fixed a spacing issue on the RecapTableLine component
  • We fixed the Rating reset button not clearing the displayed value
  • We fixed the LinkButton losing its button appearance after TypeScript migration

Dependencies updates

Core / Runtime packages:

Package	From	To
axios	1.13.5	1.14.0
graphql	16.12.0	16.13.2
ioredis	5.9.3	5.10.1
lodash	4.17.23	4.18.1
lodash-es	4.17.23	4.18.1
isbot	5.1.35	5.1.37
react-intl	8.1.3	8.1.4
react-cookie	8.0.1	8.1.0
react-icons	5.5.0	5.6.0
validator	13.15.26	13.15.35
convict	6.2.4	6.2.5
dotenv	17.3.1	17.4.1
swr	2.4.0	2.4.1
universal-cookie	8.0.1	8.1.0
async-ratelimiter	1.6.4	1.6.5
@formatjs/cli-lib	8.3.0	8.5.1
contentful	11.10.4	11.12.0

GraphQL:

Package	From	To
graphql-yoga	5.18.0	5.21.0
@graphql-yoga/plugin-disable-introspection	2.19.0	2.22.0
@graphql-yoga/render-graphiql	5.18.0	5.21.0
@graphql-codegen/cli	6.1.2	6.2.1
@graphql-codegen/client-preset	5.2.3	5.2.4
@graphql-codegen/schema-ast	5.0.0	5.0.1
@graphql-codegen/typescript	5.0.8	5.0.9
vite-plugin-graphql-codegen	3.8.0	3.9.0

Payment Providers:

Package	From	To
@adyen/adyen-web	6.31.1	6.33.0
@stripe/react-stripe-js	5.6.0	5.6.1
@stripe/stripe-js	8.8.0	8.11.0
stripe	20.3.1	20.4.1

Search:

Package	From	To
algoliasearch	5.49.0	5.50.1

Observability:

Package	From	To
@opentelemetry/instrumentation-http	0.212.0	0.214.0
@opentelemetry/sdk-node	0.212.0	0.214.0

Build Tools:

Package	From	To
esbuild	0.27.3	0.28.0
rollup	4.59.0	4.60.1
autoprefixer	10.4.24	10.4.27
sass	1.97.3	1.99.0
globby	16.1.1	16.2.0
minimatch	10.2.2	10.2.5
p-queue	9.1.0	9.1.1
path-to-regexp	8.3.0	8.4.2

Dev Tools / Testing:

Package	From	To
eslint	8.57.1	10.2.0
memfs	4.56.10	4.57.1

Storybook:

Package	From	To
storybook	10.2.10	10.3.4
@storybook/addon-docs	10.2.10	10.3.4
@storybook/addon-links	10.2.10	10.3.4
@storybook/addon-onboarding	10.2.10	10.3.4
@storybook/builder-vite	10.2.10	10.3.4
@storybook/react-vite	10.2.10	10.3.4
@chromatic-com/storybook	5.0.1	5.1.1

---

Fixes from 3.20 have also been backported into previous minor versions. The following patch versions were released: 3.19.1, 3.18.4, 3.17.3, 3.16.4, 3.15.5, 3.14.6, and 3.13.7.

---

Upgrade Front-Commerce (Migration guides): 3.20.0
Read the full changelog (Customers only): 3.20.0.