SAP Commerce Cloud: Assisted Service Mode

Features

The Assisted Service Mode module provides a set of features designed to enhance customer support process, such as:

• UI component to manage the emulation process
• Customer search with autocomplete
• Emulation of the customer's account
• Cart binding
• Session timer
• Customer 360 view
• Additional API methods on the middleware layer

Installation

Prerequisite: Make sure you have the @vsf-enterprise/unified-api-sapcc package at least in version 0.22.4 installed in your project.

Add the module files

From the root of your project run the following command:

npx @vsf-enterprise/storefront-cli add-module sap-asm -e [sapcc,sapcc-b2b]

Follow the instructions in the command line to complete the installation. To make sure the installation is finished, go to the apps/storefront-middleware/sf-modules folder and check if there's a folder named sap-asm inside.

Middleware Extension

This module expands your SAP capabilities with essential middleware methods. Extend your middleware configuration to start using the Assisted Service Mode (ASM).

// storefront-middleware/integrations/sapcc/config.ts

import type { MiddlewareConfig } from "@vsf-enterprise/sapcc-api";
import type { ApiClientExtension, Integration } from "@vue-storefront/middleware";
import { asmExtensionFactory } from "@sf-modules-middleware/sap-asm"; import { multistoreExtension, unifiedApiExtension } from "./extensions";

// ...

export const config = {
  location: "@vsf-enterprise/sapcc-api/server",
  configuration: {
    // ...
  },
  extensions: (extensions: ApiClientExtension[]) => [
    ...extensions,
    unifiedApiExtension,
    ...(IS_MULTISTORE_ENABLED === "true" ? [multistoreExtension] : []),
    asmExtensionFactory(),   ],
} satisfies Integration<MiddlewareConfig>;

The ASM module requires an overridden version of the logoutCustomer method. To enable that version, edit the Unified extension:

// storefront-middleware/integrations/sapcc/extensions/unified.ts

import { createUnifiedExtension } from "@vsf-enterprise/unified-api-sapcc";
import { asmOverrideMethods } from "@sf-modules-middleware/sap-asm"; // ...

export const unifiedApiExtension = createUnifiedExtension({
   methods: {      override: {        ...asmOverrideMethods     },    }, // ...
});

Then, export the type of the new extension in the types.ts file in the root directory of the Middleware.

// storefront-middleware/types.ts

export {
  type UnifiedEndpoints,
} from "./integrations/sapcc/types";

export type { AsmEndpoints } from "@sf-modules-middleware/sap-asm"; 

Frontend Implementation

Add the ASM panel component to your layout:

1. Extend SDK configuration

First, you need to add the newly installed extension to the SDK config. To do so, edit the sdk/sdk.config.ts file in your Next.js Storefront directory.

// storefront-unified-nextjs/sdk/sdk.config.ts

import { contentfulModule } from '@vsf-enterprise/contentful-sdk';
import { CreateSdkOptions, createSdk } from '@vue-storefront/next';
import type { UnifiedEndpoints } from 'storefront-middleware/types'; import type {   UnifiedEndpoints,   AsmEndpoints, } from 'storefront-middleware/types'; 
//...

export const { getSdk } = createSdk(options, ({ buildModule, middlewareModule, middlewareUrl, getRequestHeaders }) => ({
  unified: buildModule(middlewareModule<UnifiedEndpoints>, {
    apiUrl: `${middlewareUrl}/commerce`,
    defaultRequestConfig: {
      headers: getRequestHeaders(),
    },
  }),
  asm: buildModule(middlewareModule<AsmEndpoints>, {     apiUrl: `${middlewareUrl}/commerce/asm`,     defaultRequestConfig: {       headers: getRequestHeaders(),     },   }),   contentful: buildModule(contentfulModule, {
    apiUrl: `${middlewareUrl}/cntf`,
  }),
}));

export type Sdk = ReturnType<typeof getSdk>;

2. Add the ASM panel component to your layout

In your main _app.tsx file, add the AsmPanel component along with the useAsmUi hook:

// storefront-unified-nextjs/pages/_app.tsx

import { useEffect, useState } from 'react';
import { NextPage } from 'next';
import type { AppProps } from 'next/app';
import { AsmPanel, useAsmUi } from '@sf-modules/sap-asm'; // ...

function MyApp({ Component, pageProps }: AppPropsWithLayout) {
  const notification = useNotification();
  const { isVisible } = useAsmUi();   // ...

  return (
    // ...
      <CartProvider>
        // ...
        <div className={classNames(fontHeadings.variable, fontBody.variable, 'font-body')}>
          {isVisible && <AsmPanel />}          <Component {...pageProps} />
        </div>
      </CartProvider>
    // ...
  );
}

// storefront-unified-nextjs/pages/_app.tsx

import dynamic from 'next/dynamic';

const AsmPanel = dynamic(() => import('@sf-modules/sap-asm/components/AsmPanel'), {
  ssr: false,
});

How to use the ASM module

UI Panel

The ASM module introduces an additional panel to the user interface. This panel is where the ASM Agent logs in using a single login form. Once logged in, the agent can search for a specific customer.

You can display the ASM panel by adding the asm=true query parameter, f.e.: https://my-domain.com/category?asm=true. You can add this parameter to any page URL to open the ASM panel since the component is added globally on the app level.

Logging in as an ASM Agent

To login as an ASM Agent, you need to provide the credentials of the Customer Support Agent. This user must have the necessary permissions to access the ASM module. You can configure it in SAP Backoffice. Logging in with a regular customer account credentials will be rejected.

Customer Search

Once logged in as an ASM Agent, you can search for a customer by typing their name, email, or any other identifying information. The ASM module will display a list of matching customers, and you can select the one you want to emulate.

Emulating a Customer

When you select a customer to emulate, the ASM module will switch to the customer's account. The cart, personal data, and other information will be displayed as if you were the customer. During the emulation, every action that you will perform will be done on behalf of the customer, such as:

• Adding or removing products from the cart
• Changing the quantity of products in the cart
• Modifying the customer's personal data
• Applying discounts
• Creating and viewing orders

Emulation Control

The ASM Agent can stop the emulation at any time and start it again for a different customer. This flexibility allows the agent to assist multiple customers in a single session.

Cart Binding

During the emulation, the ASM Agent can bind a different cart ID to the emulated customer.It can be achieved by providing a new cart ID within a modal. This action will replace current customer's cart. This feature allows the agent to manage the customer's shopping cart effectively.

Customer 360 View

View all the customer's information in one place. The ASM module provides a 360 view of the customer, including personal data, orders, and other relevant information. This feature allows the ASM Agent to quickly access the customer's details and provide better support.

Session Timer

While the ASM Agent is logged in, a timer is displayed , showing the time remaining until the ASM Agent's session automatically ends. This feature ensures that the agent's access to the customer's account is limited and secure.

Session time will be prolonged after each page navigation or page refresh.

The Assisted Service Mode (ASM) module is a powerful tool for enhancing customer support. By allowing agents to emulate customers and perform actions on their behalf, it provides a seamless and efficient way to assist customers in real-time.