Migrating B2B projects to version 2 of the Frontend SDK

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, and then run yarn install to update the yarn.lock file.

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

   Event to add to the ComposableCommerceEvents.ts fileTypeScript React

   import { ProjectSettings } from '@shared/types/ProjectSettings';
   
   type ComposableCommerceEventsB2B = {
     projectSettingsFetched: { projectSettings: ProjectSettings };
   };
   
   export { type ComposableCommerceEventsB2B };

   In version 1 of the SDK, this event was defined in the @commercetools/frontend-sdk npm package, in the StandardEvents.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.