# 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 also check if these need updates against the [breaking changes](/frontend-development/releases/2024-11-12-breaking-changes-introduced-version-200-of-the-commercetools-frontend-sdk#breaking-changes).

For migrating B2C projects, see [the migration guide for B2C projects](/frontend-development/migrating-v2-base-sdk-b2c.md).

Version 2 of the SDK contains [breaking changes](/frontend-development/releases/2024-11-12-breaking-changes-introduced-version-200-of-the-commercetools-frontend-sdk#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](https://www.npmjs.com/package/@commercetools/frontend-sdk). 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:

   ```tsx title="Event to add to the ComposableCommerceEvents.ts file"
   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](https://github.com/FrontasticGmbH/scaffold-b2b/blob/main/frontend/src/app/%5Blocale%5D/%5B%5B...slug%5D%5D/page.tsx).

9. If you have made custom updates to your project, check them against this guide and the [list of changes](/frontend-development/releases/2024-11-12-breaking-changes-introduced-version-200-of-the-commercetools-frontend-sdk), and update any references or dependencies as needed.

## Related pages

- [Area overview page with navigation](/frontend-development.md)
- [Previous page: Developing SDK integrations](/frontend-development/developing-sdk-integrations.md)
- [Next page: Migrating B2C projects to version 2 of the SDK](/frontend-development/migrating-v2-base-sdk-b2c.md)
- [Search documentation and API specs](/search.md)