Agent Assist feature integration

Last updated:
Edit on GitHub

Install Feature Core

Prerequisites

To start feature integration, overview and install the necessary features:

Name Version
Spryker Core 201903.0
Spryker Core Back Office 201903.0
Customer Account Management 201903.0

1) Install the required modules using Composer

Run the following command(s) to install the required modules:

composer require spryker-feature/agent-assist:"^201903.0" --update-with-dependencies
Verification
Make sure that the following modules were installed:
ModuleExpected Directory
`Agent``vendor/spryker/agent`
`AgentGui``vendor/spryker/agent-gui`

2) Set up the Database Schema

Run the following commands to apply database changes and to generate entity and transfer changes.

console transfer:generate
console propel:install
console transfer:generate
Verification
Verify the following changes by checking your database:
Database EntityTypeEvent
`spy_user.is_agent`columncreated

3) Set up Behavior

Configure User Zed UI for Agent Handling

Enable the following behaviors by registering the plugins:

Plugin Description Prerequisites Namespace
UserAgentFormExpanderPlugin Adds “is an agent” checkbox to the Zed User form. None Spryker\Zed\AgentGui\Communication\Plugin
UserAgentTableConfigExpanderPlugin Adds “is an agent” column to the Zed Users table. None Spryker\Zed\AgentGui\Communication\Plugin
UserAgentTableDataExpanderPlugin Fills “is an agent” column in the Zed Users table. None Spryker\Zed\AgentGui\Communication\Plugin
src/Pyz/Zed/User/UserDependencyProvider.php 
<?php

namespace Pyz\Zed\User;

use Spryker\Zed\AgentGui\Communication\Plugin\UserAgentFormExpanderPlugin;
use Spryker\Zed\AgentGui\Communication\Plugin\UserAgentTableConfigExpanderPlugin;
use Spryker\Zed\AgentGui\Communication\Plugin\UserAgentTableDataExpanderPlugin;
use Spryker\Zed\User\UserDependencyProvider as SprykerUserDependencyProvider;

class UserDependencyProvider extends SprykerUserDependencyProvider
{
/**
* @return \Spryker\Zed\UserExtension\Dependency\Plugin\UserFormExpanderPluginInterface[]
*/
protected function getUserFormExpanderPlugins(): array
{
return [
new UserAgentFormExpanderPlugin(),
];
}

/**
* @return \Spryker\Zed\UserExtension\Dependency\Plugin\UserTableConfigExpanderPluginInterface[]
*/
protected function getUserTableConfigExpanderPlugins(): array
{
return [
new UserAgentTableConfigExpanderPlugin(),
];
}

/**
* @return \Spryker\Zed\UserExtension\Dependency\Plugin\UserTableDataExpanderPluginInterface[]
*/
protected function getUserTableDataExpanderPlugins(): array
{
return [
new UserAgentTableDataExpanderPlugin(),
];
}
}

Verification
Make sure that the following plugins were registered:
PluginDescriptionPrerequisitesNamespace
`UserAgentFormExpanderPlugin`Adds "is an agent" checkbox to the Zed User form.None`Spryker\Zed\AgentGui\Communication\Plugin`
`UserAgentTableConfigExpanderPlugin`Adds "is an agent" column to the Zed Users table.None`Spryker\Zed\AgentGui\Communication\Plugin`
`UserAgentTableDataExpanderPlugin`Fills "is an agent" column in the Zed Users table.None`Spryker\Zed\AgentGui\Communication\Plugin`

Install feature frontend

Prerequisites

To start feature integration, overview and install the necessary features:

Name Version
Spryker Core E-commerce 201903.0

1) Install the required modules using Composer

Run the following command(s) to install the required modules:

composer require spryker-feature/agent-assist:"^201903.0" --update-with-dependencies
Verification
Verify if the following modules were installed:
ModuleExpected Directory
`AgentPage``vendor/spryker-shop/agent-page`
`AgentWidget``vendor/spryker-shop/agent-widget`

2) Add Translations

Append glossary according to your configuration:

src/data/import/glossary.csv 
agent.authentication.failed,Authentication failed,en_US
agent.authentication.failed,Authentifizierung fehlgeschlagen,de_DE
agent.login.title,Access your account,en_US
agent.login.title,Ich bin bereits Kunde,de_DE
agent.confirm_user_selection,Confirm,en_US
agent.confirm_user_selection,Bestätigen,de_DE
agent.login.email,Email,en_US
agent.login.email,E-Mail,de_DE
agent.login.password,Password,en_US
agent.login.password,Passwort,de_DE
agent.control_bar.username,Agent: %username%,en_US
agent.control_bar.username,Agent: %username%,de_DE
agent.control_bar.customer_name,Customer: %username%,en_US
agent.control_bar.customer_name,Kunde: %username%,de_DE
agent.control_bar.logout_as_customer,End Customer Assistance,en_US
agent.control_bar.logout_as_customer,Kunden-Assistenz beenden,de_DE
agent.control_bar.logout,Logout,en_US
agent.control_bar.logout,Abmelden,de_DE
agent.autocomplete.no_results,No results found,en_US
agent.autocomplete.no_results,Keine Ergebnisse gefunden,de_DE
autocomplete.placeholder,Search,en_US
autocomplete.placeholder,Suche,de_DE

Run the following command(s) to add the glossary keys:

console data:import:glossary
Verification
Make sure that in the database the configured data are added to the `spy_glossary` table.

3) Enable Controllers

Service Provider List

Register service provider(s) in the Yves application:

Provider Namespace Specification
AgentPageSecurityServiceProvider SprykerShop\Yves\AgentPage\Plugin\Provider Registers security firewalls, access rules, impersonate rules and login/logout handlers for Agent users.
src/Pyz/Yves/ShopApplication/YvesBootstrap.php 
<?php

namespace Pyz\Yves\ShopApplication;

use SprykerShop\Yves\AgentPage\Plugin\Provider\AgentPageSecurityServiceProvider;
use SprykerShop\Yves\ShopApplication\YvesBootstrap as SprykerYvesBootstrap;

class YvesBootstrap extends SprykerYvesBootstrap
{
/**
* @return void
*/
protected function registerServiceProviders()
{
$this->application->register(new AgentPageSecurityServiceProvider()); # AgentFeature
}
}

Verification
Verify the following changes:
* Try to open the link:`http://mysprykershop.com/agent/secured`
* You should be redirected to`http://mysprykershop.com/agent/login`

Controller Provider List

Register controller provider(s) in the Yves application:

Provider Namespace Enabled Controller Controller Specification
AgentPageControllerProvider SprykerShop\Yves\AgentPage\Plugin\Provider AgentPage\AuthController Login/Logout actions for the Agent user.
AgentWidgetControllerProvider SprykerShop\Yves\AgentWidget\Plugin\Provide AgentWidget\CustomerAutocompleteController Customer autocomplete action for the Agent control bar.
src/Pyz/Yves/ShopApplication/YvesBootstrap.php 
<?php

namespace Pyz\Yves\ShopApplication;

use SprykerShop\Yves\AgentPage\Plugin\Provider\AgentPageControllerProvider;
use SprykerShop\Yves\AgentWidget\Plugin\Provider\AgentWidgetControllerProvider;
use SprykerShop\Yves\ShopApplication\YvesBootstrap as SprykerYvesBootstrap;

class YvesBootstrap extends SprykerYvesBootstrap
{
/**
* @param bool|null $isSsl
*
* @return \SprykerShop\Yves\ShopApplication\Plugin\Provider\AbstractYvesControllerProvider[]
*/
protected function getControllerProviderStack($isSsl)
{
return [
new AgentPageControllerProvider($isSsl), #AgentFeature
new AgentWidgetControllerProvider($isSsl), #AgentFeature
];
}
}

Verfication
Verify the `AgentPageControllerProvider` opening the agent login page by the link: `http://mysprykershop.com/agent/login](http://mysprykershop.com/agent/login`
Verification
Verify the `AgentWidgetControllerProvider` searching customers from Agent control bar after Agent login.

4) Set up Widgets

Register the following global widget(s):

Widget Specification Namespace
AgentControlBarWidget Allows agents to select customers and impersonate. SprykerShop\Yves\AgentWidget\Widget
src/Pyz/Yves/ShopApplication/ShopApplicationDependencyProvider.php 
<?php

namespace Pyz\Yves\ShopApplication;

use SprykerShop\Yves\AgentWidget\Widget\AgentControlBarWidget;
use SprykerShop\Yves\ShopApplication\ShopApplicationDependencyProvider as SprykerShopApplicationDependencyProvider;

class ShopApplicationDependencyProvider extends SprykerShopApplicationDependencyProvider
{
/**
* @return string[]
*/
protected function getGlobalWidgets(): array
{
return [
AgentControlBarWidget::class,
];
}
}

Run the following command to enable Javascript and CSS changes.

In case if you have custom layout template, please place the agent widget above the site header:

{% widget 'AgentControlBarWidget' only %}{% endwidget %}
Verification
Make sure that the following widgets were registered:
ModuleTest
`AgentControlBarWidget`Login as an Agent. The control bar widget should appear above the site header.