Documentation

Migrating B2B projects to version 2 of the Frontend SDK

This guide helps you migrate your B2B projects from version 1 to version 2 of the commercetools Frontend SDK. If you made custom changes to your project, you must check if these need updates too.

For migrating B2C projects, see the migration guide for B2C projects.

Version 2 of the SDK contains breaking changes.

Migrate your project

To migrate your B2B project to version 2 of the Frontend SDK, follow these steps:

  1. Update the @commercetools/frontend-sdk package to the latest SDK version in one of the following ways:

    • Run the Yarn command: yarn upgrade @commercetools/frontend-sdk.
    • Go to your project's package.json file and update the version number to the latest version listed on NPM. Save the file, then run yarn install and yarn.lock.

  2. Go to your project's events file at: packages/PROJECT_NAME/frontend/src/sdk/composable-commerce-b2b/types/events/ComposableCommerceEventsB2B.ts. Add the following event to the file:

    Event to add to the ComposableCommerceEvents.ts fileTypeScript React
    projectSettingsFetched: {
      projectSettings: unknown;
    }

    In version 1 of the SDK, this event was located in theStandardEvents.ts file.

  3. In all files at this path packages/PROJECT_NAME/frontend/src/sdk/composable-commerce-b2b/library/actions, replace skipQueue with parallel in the options parameters of the SDK.callAction arguments. By default, all actions are executed asynchronously in version 2 of the SDK. To override this and queue actions for sequential execution, pass parallel: false to the SDK.callAction argument.

  4. In packages/PROJECT_NAME/frontend/sdk/src/composable-commerce-b2b/library/actions/AccountActions, replace the rememberMeCookieAsync import with rememberMeCookie, and update all references to it.

    By default, all cookie management methods are asynchronous.

  5. In packages/PROJECT_NAME/frontend/src/lib/hooks/usePurchaseLists/index.ts, wrap the removeFromWishlists payload object in a { wishlists } object. Then, in packages/PROJECT_NAME/backend/commerce-commercetools/actionControllers/WishlistController.ts, update the requestBody in the removeLineItems action to reflect the change to the { wishlists } object.

  6. Delete the following files:

    • packages/PROJECT_NAME/frontend/src/types/lib/page.d.ts
    • packages/PROJECT_NAME/frontend/src/types/lib/response.ts.

  7. In packages/PROJECT_NAME/frontend/src/lib/renderer/index.tsx, add a non-null assertion operator to section errors. For example, update section. to section!. in the sections mapping in the component return. This is to ensure compatibility and correct syntax for TypeScript.

  8. In packages/PROJECT_NAME/frontend/src/app/[locale]/[[...slug]]/page.tsx, replace all of the file's content with the content in the latest version of the page.tsx file.

  9. If you have made custom updates to your project, check them against this guide and the list of changes, and update any references or dependencies as needed.