diff --git a/apps/docs/blog/authors.yml b/apps/docs/blog/authors.yml index 8d63eb86c..fbb97344b 100644 --- a/apps/docs/blog/authors.yml +++ b/apps/docs/blog/authors.yml @@ -38,3 +38,12 @@ adam.makiewicz: page: true socials: github: Shriz07 + +tomasz.paciorkowski: + name: Tomasz Paciorkowski + title: Frontend Engineer @ O2S + url: https://github.com/tomaszpacior + image_url: https://avatars.githubusercontent.com/u/175005357?v=4 + page: true + socials: + github: tomaszpacior diff --git a/apps/docs/blog/releases/o2s/1.6.0.md b/apps/docs/blog/releases/o2s/1.6.0.md new file mode 100644 index 000000000..242ee3841 --- /dev/null +++ b/apps/docs/blog/releases/o2s/1.6.0.md @@ -0,0 +1,184 @@ +--- +slug: open-self-service-release-1.6.0 +title: Open Self Service Release 1.6.0 +date: 2026-03-17T12:00 +tags: [releases] +authors: [tomasz.paciorkowski] +toc_max_heading_level: 2 +image: /img/blog/o2s-1.6.0-header.png +--- + +![o2s-1.6.0-header.png](/img/blog/o2s-1.6.0-header.png) + +We're excited to announce Release 1.6.0 of Open Self Service! This release lays the groundwork for **cart and checkout capabilities** with Medusa integration, introduces an **interactive CLI wizard** for setting up new projects, brings a major **domain-based reorganization** of blocks and UI components, and adds **Zendesk Help Center** support for browsing articles and categories. + +Let's dive into what's new! + + + +## New features + +### Cart and checkout + +This release introduces the initial version of cart and checkout support. You can now build shopping experiences where users browse products, add items to a cart, go through a multi-step checkout (shipping, billing, payment), and receive an order confirmation — all within O2S. + +What's included: + +- New blocks covering the full purchase journey: from cart management through checkout steps to order confirmation. +- "Add to Cart" buttons across product blocks (Product List, Product Details, Recommended Products) with promo code support. +- Multi-step checkout with address, company data, and payment forms — including validation and error handling. + +:::tip +For setup instructions and data model details, see the new documentation for [Carts](../../../docs/main-components/harmonization-app/normalized-data-model/core-model-carts), [Checkout](../../../docs/main-components/harmonization-app/normalized-data-model/core-model-checkout), and [Payments](../../../docs/main-components/harmonization-app/normalized-data-model/core-model-payments). +::: + +### Medusa.js commerce integration + +To power the cart and checkout features above, we've added a full [Medusa.js integration](../../../docs/integrations/commerce/medusa-js/overview) — the first commerce backend supported in O2S. This means you can connect to a real store out of the box, without building your own API layer. + +The integration covers six O2S modules: + +| Module | What it enables | +| --------- | --------------- | +| Carts | Cart creation, line items, addresses, shipping methods, promo codes | +| Checkout | Multi-step checkout flow with order placement | +| Customers | Saved address management for authenticated users | +| Orders | Order history and details | +| Payments | Payment session creation and provider selection | +| Products | Product catalog browsing with variants and pricing | + +It supports both guest and authenticated checkout, multi-currency pricing, and uses Medusa's Store API with SSO-based authentication. For extended use cases like asset tracking and service subscriptions, there's also an optional [Medusa plugin](https://github.com/o2sdev/medusa-plugin-assets-services) that adds custom entities. + +:::tip +See the full [Medusa.js integration docs](../../../docs/integrations/commerce/medusa-js/overview) for setup instructions, and the [Cart & Checkout guide](../../../docs/integrations/commerce/medusa-js/cart-checkout) for details on the checkout flow. +::: + +### Interactive CLI wizard + +Setting up a new O2S project is now much easier. Instead of cloning a repository and manually configuring packages, you can use the new interactive wizard that walks you through the entire process: + +```shell +npx create-o2s-app my-project +``` + +The wizard lets you choose between three paths: + +- **O2S** — a Self Service Portal with customer-facing blocks (tickets, orders, invoices, etc.). +- **DXP** — a Digital Experience Platform with marketing-oriented content blocks (hero, features, pricing, etc.). +- **Custom** — pick exactly which blocks and integrations you need. + +After you make your choices, the wizard automatically sets up the project: installs the right packages, generates environment variable configuration, and prepares the app to run. It also includes a new `@o2s/integrations.mocked-dxp` integration that provides ready-to-use mock content for the DXP path, so you can see a working application right away. + +:::tip +For all available CLI options and usage examples, see the [Installation guide](../../../docs/getting-started/installation). +::: + +### Domain-based block and UI organization + +Blocks and UI components are now organized by business domain. For example, billing-related blocks live under `packages/blocks/billing/`, support blocks under `packages/blocks/support/`, and checkout blocks under `packages/blocks/checkout/`. The same applies to UI components, which are now grouped into categories like `Cart`, `Checkout`, `Cards`, `Data`, `Forms`, `Products`, and others. + +This makes it easier to find what you're looking for when working with the codebase, and scales better as the number of blocks grows. + +:::info +**Breaking change**: UI import paths have changed. The new format is `@o2s/ui/components//` — for example: + +```typescript +import { ProductCard } from '@o2s/ui/components/Cards/ProductCard'; +import { DataGrid } from '@o2s/ui/components/Data/DataGrid'; +import { Carousel } from '@o2s/ui/components/Media/Carousel'; +``` +::: + +### Shared block prop types + +Previously, every block defined its own props like `slug`, `userId`, or `isDraftModeEnabled` independently. This led to subtle inconsistencies and made it harder to maintain blocks as the number of them grew. + +We've introduced a set of shared prop types in `@o2s/framework` that blocks can now extend: + +```typescript +import { Models } from '@o2s/framework/modules'; + +// Pick only what your block needs: +type MyBlockProps = Models.BlockProps.FullBlockProps; + +// Available base types: +// - BaseBlockProps → id, locale, accessToken, routing +// - BlockWithSlugProps → + slug +// - BlockWithUserIdProps → + userId +// - BlockWithDraftModeProps → + isDraftModeEnabled +// - FullBlockProps → all of the above combined +``` + +If you maintain custom blocks, switching to these shared types keeps your prop contracts consistent with the rest of the ecosystem and reduces the amount of boilerplate. + +### Zendesk Help Center articles + +The Zendesk integration now goes beyond tickets. Users can browse Help Center content — articles and categories — directly within the O2S portal. This is useful when you want to offer a self-service knowledge base alongside your ticketing system. + +:::tip +See the updated [Zendesk integration documentation](../../../docs/integrations/articles/zendesk/overview) for setup instructions and available features. +::: + +### Page-level redirects + +You can now configure redirects at the page level through your CMS. When a page has a `redirect` field set, the frontend automatically performs a locale-aware redirect. This is handy for cases like redirecting a homepage (`/en`) to a specific landing page (`/en/personal`), or handling URL migrations without touching code. + +## Other changes + +### Developer experience + +Several improvements make day-to-day work with O2S smoother: + +- **Consistent integration services**: integration modules now properly extend framework base classes, which avoids issues with NestJS dependency injection that could occur when mixing `implements` and `extends`. If you maintain custom integrations, make sure your services extend the base class rather than just implementing the interface. + +- **Shared header constants**: instead of repeating string literals like `'x-locale'` or `'x-client-timezone'` throughout the codebase, there's now a single source of truth: + + ```typescript + import { HeaderName } from '@o2s/framework/utils'; + + // Use HeaderName.Locale instead of 'x-locale' + // Use HeaderName.Currency instead of 'x-currency' + ``` + +- **Block registry**: adding new blocks to the frontend no longer requires editing a large `switch` statement. Blocks are now registered in a typed map, and unrecognized block types produce a clear warning in the console: + + ```typescript + const BLOCK_REGISTRY = { + TicketListBlock: (props) => , + CartBlock: (props) => , + // ... + } satisfies Record; + ``` + +- **Improved generators**: CMS integration scaffolding is cleaner, the block generator output matches real-world usage more closely, and the `eject-block` CLI command now correctly sets the source branch. + +### New UI components + +A set of new UI components was added to support the cart and checkout flows: + +- [`StepIndicator`](https://storybook-o2s.openselfservice.com/?path=/docs/components-checkout-stepindicator--docs) — visual step progress for multi-step checkout. +- [`RadioTile`](https://storybook-o2s.openselfservice.com/?path=/docs/components-forms-radiotilegroup--docs) — selectable option tiles (e.g., for shipping or payment methods). +- [`CartItem`](https://storybook-o2s.openselfservice.com/?path=/docs/components-cart-cartitem--docs), [`CartSummary`](https://storybook-o2s.openselfservice.com/?path=/docs/components-cart-cartsummary--docs), [`CartPromoCode`](https://storybook-o2s.openselfservice.com/?path=/docs/components-cart-cartpromocode--docs) — cart display and promo code input. +- [`AddressFields`](https://storybook-o2s.openselfservice.com/?path=/docs/components-checkout-addressfields--docs), [`QuantityInput`](https://storybook-o2s.openselfservice.com/?path=/docs/components-forms-quantityinput--docs) — form building blocks for checkout pages. + +### Storybook and documentation + +- Custom Storybook landing page with O2S branding and navigation guidance. +- Package-level README files are now displayed as Storybook documentation (autodocs enabled across blocks). +- Updated READMEs across blocks, integrations, and framework packages. +- New documentation for Carts, Checkout, Customers, Orders, Payments, and Resources data models. + +### Testing and quality + +- Extensive new unit tests for integration packages: Algolia, Zendesk, Redis, MedusaJS, Contentful, and Strapi — covering services, mappers, and error handling. +- Standardized Vitest configuration with coverage collection and reporting. + +### Bugfixes + +- Fixed an issue where pressing arrow keys would scroll multiple carousels at once instead of only the focused one. +- Fixed duplicated navigation items appearing in the header. +- Blocks now handle incomplete or missing data from the CMS more gracefully instead of throwing errors. + +### Dependency and security updates + +This release includes broad dependency maintenance across the stack, including security patches for axios, flatted, qs, and swiper, as well as an upgrade to **Storybook 10.2**. diff --git a/apps/docs/static/img/blog/o2s-1.6.0-header.png b/apps/docs/static/img/blog/o2s-1.6.0-header.png new file mode 100644 index 000000000..83bb4a1cc Binary files /dev/null and b/apps/docs/static/img/blog/o2s-1.6.0-header.png differ