@zohodesk/library-platform 1.1.10-exp.1 → 1.1.10-exp.2

package/es/platform/client-actions/components/action-event-mediator/frameworks/ui/ActionEventMediatorView.js

@@ -1,21 +1,38 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 import React from 'react';
-import RowActionsRenderer from "../../../row-actions-renderer/frameworks/ui/RowActionsRenderer";
-import { ComponentRegistry } from "../../../../../../library";
-export default function ActionEventMediatorView(_ref, ref) {
+import ComponentRegistry from "../../../../../../library/custom-component/frameworks/ui/ComponentRegistry";
+import ActionComponentMapping from "../../../../../../library/dot/components/action-location/frameworks/ui/ActionComponentMapping";
+
+function ActionEventMediatorView(_ref, ref) {
   let {
     state
   } = _ref;
   const {
-    actions,
-    renderComponentType,
-    gap,
-    testId
+    action
   } = state.properties;
-  const ActionRenderComponent = ComponentRegistry.get(renderComponentType) || RowActionsRenderer;
-  return /*#__PURE__*/React.createElement(ActionRenderComponent, {
-    testId: testId,
-    actions: actions,
-    gap: gap,
+  const {
+    component,
+    properties,
+    eventMappings,
+    id: actionId
+  } = action;
+  const Component = ComponentRegistry.get(component) || ActionComponentMapping[component];
+
+  if (!Component) {
+    return /*#__PURE__*/React.createElement("div", {
+      ref: ref
+    }, "Error");
+  }
+
+  return /*#__PURE__*/React.createElement(Component, _extends({
     getRef: ref
-  });
-}
+  }, properties, {
+    appendToActionPayload: {
+      eventMappings,
+      actionId
+    }
+  }));
+}
+
+export default ActionEventMediatorView;

package/es/platform/client-actions/components/action-event-mediator/frameworks/ui/ClientActionsAdapter.js

@@ -1,9 +1,3 @@
-import { createCustomComponent } from "../../../../../../library/custom-component";
-import ActionEventMediatorProperties from "../../../../cc/action-event-mediator/Properties";
-import EventHandlersFactory from "./EventHandlersFactory";
-import ActionEventMediatorView from "./ActionEventMediatorView"; // import ClientActionsSDKFactory from '../../../../behaviour/zclient-actions/frameworks/sdk/ClientActionsSDKFactory'; TODO: Add support for returning clientActionsSDK factory when client actions SDK is merged to V2
-
-import ClientActionsBehaviourFactory from "../../../../behaviour/zclient-actions/frameworks/ClientActionsBehaviourFactory";
 import getClientActions from "../../../../../data-source/http-template/getClientActions";
 import ClientActionsTranslator from "../../../../translators/client-actions-translator";
 import FetchGateWay from "../../../../../zhttp/adapters/gateway/FetchGateWay";
@@ -27,7 +21,7 @@ const ClientActionsAdapterUtils = {
   },
 
   transform(input) {
-    return ClientActionsTranslator.transform(input, {
+    return ClientActionsTranslator.transform(input, "Adapter", "Adapter", {
       departmentName: windowWrapper.currentDepartment.sanitizedName,
       orgId: windowWrapper.currentOrg.id,
       orgName: windowWrapper.currentOrg.portalName,
@@ -37,29 +31,6 @@ const ClientActionsAdapterUtils = {
 
 };
 const ClientActionsAdapter = {
-  createEventHandler(clientScript) {
-    return event => {
-      let response = {
-        event: event,
-        sdk: {}
-      }; // response.sdks.clientActions = ClientActionsSDKFactory.create({ TODO: Add support for returning clientActionsSDK factory when client actions SDK is merged to V2
-      //     state: event.state,
-      //     dispatch: event.dispatch
-      // });
-
-      clientScript(response);
-    };
-  },
-
-  createActionToEventHandlers(clientScripts) {
-    const actionEventHandlers = {};
-    Object.keys(clientScripts).map(targetEvent => {
-      const clientScript = clientScripts[targetEvent];
-      actionEventHandlers[targetEvent] = ClientActionsAdapter.createEventHandler(clientScript);
-    });
-    return actionEventHandlers;
-  },
-
   fetchClientActions(args) {
     const apiDetails = ClientActionsAdapterUtils.getClientActionsAPIDetails(args);
     const fetchGateway = new FetchGateWay(window.fetch.bind(window));
@@ -73,24 +44,7 @@ const ClientActionsAdapter = {
         return Promise.resolve(actions);
       }
     });
-  },
-
-  getClientActionComponent: clientScripts => {
-    return createCustomComponent({
-      name: 'ClientActionsAdapter',
-      properties: ActionEventMediatorProperties,
-      setInitialState: () => ({
-        handlers: {}
-      }),
-      eventHandlers: { ...EventHandlersFactory.createClientActionsAdapterEventHandlers(),
-        ...ClientActionsAdapter.createActionToEventHandlers(clientScripts)
-      },
-      behaviours: [ClientActionsBehaviourFactory.create({
-        getClientActions: getClientActions
-      })],
-      View: ActionEventMediatorView
-    });
   }
+
 };
-export const getClientActionsAdapter = ClientActionsAdapter.getClientActionComponent;
 export const fetchClientActions = ClientActionsAdapter.fetchClientActions;

package/es/platform/client-actions/components/action-event-mediator/frameworks/ui/EventHandlersFactory.js

@@ -9,14 +9,6 @@ import PropertiesChangeController from "../../adapters/controllers/PropertiesCha
 import LifeCycleEvents from "../../../../../../cc/component/LifeCycleEventsEnum";
 export default class EventHandlersFactory {
   static create() {
-    return EventHandlersFactory.createClientActionsLifeCycleEventHandlers('ActionEventMediator');
-  }
-
-  static createClientActionsAdapterEventHandlers() {
-    return EventHandlersFactory.createClientActionsLifeCycleEventHandlers('ClientActionsAdapter');
-  }
-
-  static createClientActionsLifeCycleEventHandlers(componentName) {
     const repository = new Repository();
     const presenter = new Presenter();
     const dependencies = {
@@ -30,9 +22,9 @@ export default class EventHandlersFactory {
     const unmountController = new UnmountController(destroyUseCase);
     const propertiesChangeController = new PropertiesChangeController(propertiesChangeUseCase);
     return {
-      [`${componentName}#${LifeCycleEvents.MOUNT}`]: initializeController.handle,
-      [`${componentName}#${LifeCycleEvents.UPDATE_PROPERTIES}`]: propertiesChangeController.handle,
-      [`${componentName}#${LifeCycleEvents.UN_MOUNT}`]: unmountController.handle
+      [`ActionEventMediator#${LifeCycleEvents.MOUNT}`]: initializeController.handle,
+      [`ActionEventMediator#${LifeCycleEvents.UPDATE_PROPERTIES}`]: propertiesChangeController.handle,
+      [`ActionEventMediator#${LifeCycleEvents.UN_MOUNT}`]: unmountController.handle
     };
   }
 

package/es/platform/client-actions/components/row-actions-renderer/frameworks/ui/AdaptiveRowActions/AdaptiveRowActionsRenderer.js

@@ -0,0 +1,12 @@
+import { createCustomComponent } from "../../../../../../../library/custom-component";
+import RowActionsRendererProperties from "../../../../../cc/action-event-mediator/Properties";
+import { ComponentRegistry } from "../../../../../../../library";
+import AdaptiveRowActionsRendererView from "./AdaptiveRowActionsRendererView";
+const AdaptiveRowActionsRendererComponent = createCustomComponent({
+  name: 'AdaptiveRowActionsRenderer',
+  properties: RowActionsRendererProperties,
+  eventHandlers: {},
+  View: AdaptiveRowActionsRendererView
+});
+ComponentRegistry.register("AdaptiveRowActionsRenderer", AdaptiveRowActionsRendererComponent);
+export default AdaptiveRowActionsRendererComponent;

package/es/platform/client-actions/components/row-actions-renderer/frameworks/ui/AdaptiveRowActions/AdaptiveRowActionsRendererView.js

@@ -0,0 +1,42 @@
+/* eslint-disable react/prop-types */
+import React from 'react';
+import Flex from '@zohodesk/layout/es/Flex/Flex';
+import { ActionViewGap } from "../../../../interfaces/ActionViewModel";
+import ActionEventMediator from "../../../../action-event-mediator/frameworks/ui/ActionEventMediator";
+import MoreActionsRenderer from "../MoreActions/MoreActionsRenderer";
+import { findMappedClientScripts } from "../../../../../../client-scripts/behaviour/zclient-scripts-execution/frameworks/ClientScriptsUtils"; // @ts-ignore
+
+import style from "../RowActions/RowActionsRenderer.module.css";
+export default function AdaptiveRowActionsRendererView(_ref, ref) {
+  let {
+    state,
+    helpers
+  } = _ref;
+  const {
+    actions,
+    gap,
+    testId,
+    clientScripts
+  } = state.properties;
+  const [firstAction, secondAction, ...moreActions] = actions;
+  const showMore = actions.length > 3;
+  const actionsList = showMore ? [firstAction, secondAction] : actions;
+
+  const renderAction = action => /*#__PURE__*/React.createElement(ActionEventMediator, {
+    key: action.id,
+    action: action,
+    clientScripts: findMappedClientScripts(action, clientScripts),
+    instanceName: action.instanceName
+  });
+
+  return /*#__PURE__*/React.createElement(Flex, {
+    ref: ref,
+    testId: testId ? testId : '',
+    $ui_className: gap !== ActionViewGap.NONE ? style[`gap_${gap}`] : '',
+    $ui_displayMode: "inline",
+    $ui_alignItems: "center"
+  }, showMore ? /*#__PURE__*/React.createElement(React.Fragment, null, actionsList.map(renderAction), /*#__PURE__*/React.createElement(MoreActionsRenderer, {
+    actions: moreActions,
+    clientScripts: clientScripts
+  })) : actionsList.map(renderAction));
+}

package/es/platform/client-actions/components/row-actions-renderer/frameworks/ui/MoreActions/MoreActionsRenderer.js

@@ -0,0 +1,10 @@
+import { createCustomComponent } from "../../../../../../../library/custom-component";
+import RowActionsRendererProperties from "../../../../../cc/action-event-mediator/Properties";
+import MoreActionsRendererView from "./MoreActionsRendererView";
+const MoreActionsRenderer = createCustomComponent({
+  name: "MoreActionsRenderer",
+  eventHandlers: {},
+  properties: RowActionsRendererProperties,
+  View: MoreActionsRendererView
+});
+export default MoreActionsRenderer;

package/es/platform/client-actions/components/row-actions-renderer/frameworks/ui/MoreActions/MoreActionsRendererView.js

@@ -0,0 +1,79 @@
+import React from 'react';
+import ActionEventMediator from "../../../../action-event-mediator/frameworks/ui/ActionEventMediator";
+import CustomDropdown from '@zohodesk-private/desk-components/es/CustomDropdown/CustomDropdown';
+import ListItemConstants from "../../../../../../../cc/list-item/Constants";
+import IconButton from '@zohodesk/dot/es/IconButton/IconButton';
+import { findMappedClientScripts } from "../../../../../../client-scripts/behaviour/zclient-scripts-execution/frameworks/ClientScriptsUtils";
+export const ListItemConvertor = action => {
+  const {
+    id,
+    properties: {
+      icon
+    },
+    eventMappings,
+    instanceName
+  } = action;
+  const label = action.properties.label ? action.properties.label : action.properties.text;
+  const updatedEventMappings = eventMappings.map(eventMapping => {
+    return { ...eventMapping,
+      sourceEvent: ListItemConstants.LISTITEM_CLICKED
+    };
+  });
+  return {
+    component: 'ListItem',
+    properties: {
+      text: label,
+      tooltip: label,
+      icon,
+      id
+    },
+    eventMappings: updatedEventMappings,
+    id,
+    instanceName
+  };
+};
+
+function MoreActionsRendererView(_ref, ref) {
+  let {
+    state,
+    helpers
+  } = _ref;
+  const {
+    actions,
+    clientScripts
+  } = state.properties;
+  const listItemActions = actions.map(action => {
+    return ListItemConvertor(action);
+  });
+
+  const renderTargetElement = _ref2 => {
+    let {
+      handleTogglePopup,
+      isPopupOpen
+    } = _ref2;
+    return /*#__PURE__*/React.createElement(IconButton, {
+      iconName: "ZD-GN-more",
+      iconSize: "16",
+      isActive: isPopupOpen,
+      onClick: handleTogglePopup
+    });
+  };
+
+  return /*#__PURE__*/React.createElement(CustomDropdown, {
+    $ui_boxSize: "medium",
+    $flag_padding: true,
+    $render_targetElement: renderTargetElement,
+    $method_getRef: ref,
+    $customProps_dropbox: {
+      onClick: undefined
+    }
+  }, listItemActions.map(action => /*#__PURE__*/React.createElement(ActionEventMediator, {
+    key: action.id,
+    action: action,
+    clientScripts: findMappedClientScripts(action, clientScripts),
+    instanceName: action.instanceName // getRef={ref}
+
+  })));
+}
+
+export default MoreActionsRendererView;

package/es/platform/client-actions/components/row-actions-renderer/frameworks/ui/{RowActionsRenderer.js → RowActions/RowActionsRenderer.js}

@@ -1,7 +1,7 @@
-import { createCustomComponent } from "../../../../../../library/custom-component";
-import RowActionsRendererProperties from "../../../../cc/action-event-mediator/Properties";
+import { createCustomComponent } from "../../../../../../../library/custom-component";
+import RowActionsRendererProperties from "../../../../../cc/action-event-mediator/Properties";
 import RowActionsRendererView from "./RowActionsRendererView";
-import { ComponentRegistry } from "../../../../../../library";
+import { ComponentRegistry } from "../../../../../../../library";
 const RowActionsRendererComponent = createCustomComponent({
   name: 'RowActionsRenderer',
   properties: RowActionsRendererProperties,

package/es/platform/client-actions/components/row-actions-renderer/frameworks/ui/RowActions/RowActionsRenderer.module.css

@@ -0,0 +1,19 @@
+.wrapper {
+    max-width: 100%
+}
+
+.gap_small {
+    gap: 4px
+}
+
+.gap_xmedium {
+    gap: 6px
+}
+
+.gap_medium {
+    gap: 8px
+}
+
+.gap_large {
+    gap: 10px
+}

package/es/platform/client-actions/components/row-actions-renderer/frameworks/ui/RowActions/RowActionsRendererView.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import Flex from '@zohodesk/layout/es/Flex/Flex';
+import { ActionViewGap } from "../../../../interfaces/ActionViewModel";
+// @ts-ignore
+import style from "./RowActionsRenderer.module.css";
+import ActionEventMediator from "../../../../action-event-mediator/frameworks/ui/ActionEventMediator";
+import { findMappedClientScripts } from "../../../../../../client-scripts/behaviour/zclient-scripts-execution/frameworks/ClientScriptsUtils";
+
+function RowActionsRendererView(_ref, ref) {
+  let {
+    state
+  } = _ref;
+  const {
+    actions,
+    gap,
+    clientScripts,
+    testId
+  } = state.properties;
+  return /*#__PURE__*/React.createElement(Flex, {
+    ref: ref,
+    testId: testId ? testId : "",
+    $ui_displayMode: "inline",
+    $ui_alignItems: "center",
+    $ui_className: `${gap !== ActionViewGap.NONE ? style[`gap_${gap}`] : ''}`
+  }, actions.map((action, index) => {
+    // @ts-ignore
+    return /*#__PURE__*/React.createElement(ActionEventMediator, {
+      action: action,
+      clientScripts: findMappedClientScripts(action, clientScripts),
+      key: index,
+      instanceName: action.instanceName
+    });
+  }));
+}
+
+;
+export default RowActionsRendererView;

package/es/platform/client-actions/translators/client-actions-translator/index.js

@@ -8,6 +8,8 @@ export default class ClientActionsTranslator {
       id: action.id,
       component: action.uiComponentMapping.component,
       properties: action.uiComponentMapping.propertiesValueMapping,
+      instanceName: action.instanceName,
+      moduleName: action.moduleName,
       eventMappings: action.uiComponentMapping.eventMappings.map(eventMapping => {
         return {
           sourceEvent: eventMapping.sourceEvent,
@@ -19,11 +21,21 @@ export default class ClientActionsTranslator {
     };
   }
 
-  static transform(actions, context) {
+  static appendComponentMetaToActions(actions, instanceName, moduleName) {
+    return actions.map(action => {
+      return { ...action,
+        instanceName,
+        moduleName
+      };
+    });
+  }
+
+  static transform(actions, instanceName, moduleName, context) {
     const replacementContext = {
       "@context": context
     };
-    const resolvedActions = ActionContextResolver.resolveActions(actions, replacementContext);
+    const actionsWithInstanceName = ClientActionsTranslator.appendComponentMetaToActions(actions, instanceName, moduleName);
+    const resolvedActions = ActionContextResolver.resolveActions(actionsWithInstanceName, replacementContext);
     const evaluatedActions = resolvedActions.filter(action => ConditionResolver.evaluateCondition(action.conditions, replacementContext, action.id));
     const finalTransformedActions = evaluatedActions.map(action => this.transformToActionViewModel(action));
     return finalTransformedActions;

package/es/platform/client-actions/translators/condition-resolver/index.js

@@ -3,6 +3,11 @@ import { evaluateConditionsFields } from "./field-evaluators";
 import { evaluateExpression, parse } from "./pattern-evaluator";
 export class ConditionResolver {
   static evaluateCondition(condition, context, id) {
+    if (!condition) {
+      console.warn(`Client Action : Invalid value '${condition}' passed as condition in client action id : ${id}`);
+      return false;
+    }
+
     const {
       fields = [],
       pattern = ''
@@ -16,7 +21,7 @@ export class ConditionResolver {
       } = patternValidate(pattern, fields.length);
 
       if (!isValid) {
-        console.error(`Error in client action id ${id} -  condition pattern`, errorMessage);
+        console.error(`Client Action : Error in client action id : ${id} -  condition pattern.\nError: `, errorMessage);
         return false;
       }
 

package/es/platform/client-scripts/bc/zclient-scripts-execution/Constants.js

@@ -0,0 +1,11 @@
+export const CLIENT_SCRIPT_TIMOUT_LIMIT = 10000;
+export const EXECUTE_CLIENT_SCRIPTS = 'EXECUTE_CLIENT_SCRIPTS';
+export const SET_CLIENT_SCRIPTS = 'SET_CLIENT_SCRIPTS';
+export const CLIENT_SCRIPT_ARGUMENT = 'context';
+export const CLIENT_SCRIPT_PREFIX = 'Client Script';
+export const CLIENT_SCRIPT_ERROR = 'Error';
+export const CLIENT_SCRIPT_RUNTIME_ERROR_MESSAGE = `${CLIENT_SCRIPT_PREFIX} : Script execution runtime error.\n${CLIENT_SCRIPT_ERROR}: `;
+export const CLIENT_SCRIPT_ERROR_MESSAGE = `${CLIENT_SCRIPT_PREFIX} : Script execution failed due to error in script.\n${CLIENT_SCRIPT_ERROR}:`;
+export const CLIENT_SCRIPT_EXECUTION_TIMED_OUT_ERROR_MESSAGE = `${CLIENT_SCRIPT_PREFIX} : Script execution exceeded ${CLIENT_SCRIPT_TIMOUT_LIMIT / 1000}s time limit.`;
+export const CLIENT_SCRIPT_INVALID_SCRIPT_ERROR_MESSAGE = `${CLIENT_SCRIPT_PREFIX} : Error while constructing client script function.\n${CLIENT_SCRIPT_ERROR}:`;
+export const CLIENT_SCRIPT_NO_MAPPING_FOUND_ERROR_MESSAGE = `${CLIENT_SCRIPT_PREFIX} : No client script mapping found for target event.Event handler support for defining client scripts will be removed in future versions.Please define client action event handlers as client script to avoid breakage.Warning shown for target event: `;

package/es/platform/client-scripts/bc/zclient-scripts-execution/EventHandlers.js

@@ -0,0 +1 @@
+;

package/es/platform/client-scripts/bc/zclient-scripts-fetch/Constants.js

@@ -0,0 +1,11 @@
+export const SET_CLIENTSCRIPTS = 'CLIENTSCRIPT#SET_CLIENTSCRIPTS';
+export const CLIENTSCRIPT_FETCH = 'CLIENTSCRIPT_BEHAVIOUR#EXECUTE';
+export const CLIENTSCRIPT_FETCH_SUCCESS = 'CLIENTSCRIPT#EXECUTE_SUCCEEDED';
+export const CLIENTSCRIPT_FETCH_FAILURE = 'CLIENTSCRIPT#EXECUTE_FAILED';
+export const CLIENTSCRIPT_FETCH_SUCCESS_NO_CONTENT = 'CLIENTSCRIPT#EXECUTE_SUCCEEDED_NO_CONTENT';
+export const CLIENTSCRIPT_FETCH_SUCCESS_CALLBACK = 'CLIENTSCRIPT#EXECUTE_SUCCESS_CALLBACK';
+export const CLIENTSCRIPT_FETCH_SUCCESS_NO_CONTENT_CALLBACK = 'CLIENTSCRIPT#EXECUTE_SUCCESS_NO_CONTENT_CALLBACK';
+export const CLIENTSCRIPT_FETCH_FAILURE_CALLBACK = 'CLIENTSCRIPT#EXECUTE_FAIL_CALLBACK';
+export const ClientScriptAPIs = {
+  GET_CLIENTSCRIPTS: "getClientScripts"
+};

package/es/platform/client-scripts/bc/zclient-scripts-fetch/EventHandlers.js

@@ -0,0 +1 @@
+;

package/es/platform/{app-context-behaviour → client-scripts/behaviour/zclient-scripts-execution}/adapters/controllers/AbstractController.js

@@ -1,5 +1,6 @@
-export class AbstractController {
+export default class AbstractController {
   constructor(service) {
+    this.service = service;
     this.service = service;
     this.handle = this.handle.bind(this);
   }

package/es/platform/client-scripts/behaviour/zclient-scripts-execution/adapters/controllers/ClientScriptExecutionController.js

@@ -0,0 +1,10 @@
+import AbstractController from "./AbstractController";
+export default class ClientScriptExecutionController extends AbstractController {
+  handle(input) {
+    const {
+      executeClientScriptsUseCase
+    } = this.service;
+    executeClientScriptsUseCase.execute(input);
+  }
+
+}

package/es/platform/client-scripts/behaviour/zclient-scripts-execution/adapters/controllers/SetClientScriptsMappingController.js

@@ -0,0 +1,10 @@
+import AbstractController from "./AbstractController";
+export default class SetClientScriptsMappingController extends AbstractController {
+  handle(input) {
+    const {
+      setClientScriptsMappingUseCase
+    } = this.service;
+    setClientScriptsMappingUseCase.execute(input);
+  }
+
+}

package/es/platform/client-scripts/behaviour/zclient-scripts-execution/adapters/gateways/Repository.js

@@ -0,0 +1,24 @@
+import ClientScriptExecutor from "../../domain/entities/ClientScriptExecutor";
+export default class Repository {
+  init(state) {
+    this.state = state;
+    this.element = null;
+
+    this.dispatch = () => {};
+  }
+
+  updateDependencies(element, state, dispatch) {
+    this.element = element;
+    this.dispatch = dispatch;
+    this.state = state;
+  }
+
+  getClientScriptExecutor() {
+    const {
+      clientScriptsMapping,
+      context
+    } = this.state;
+    return new ClientScriptExecutor(clientScriptsMapping, context);
+  }
+
+}

package/es/platform/client-scripts/behaviour/zclient-scripts-execution/adapters/gateways/Service.js

@@ -0,0 +1,9 @@
+import ExecuteClientScriptsUseCase from "../../applications/usecases/ExecuteClientScriptsUseCase";
+import SetClientScriptsMappingUseCase from "../../applications/usecases/SetClientScriptsMappingUseCase";
+export default class Service {
+  constructor(dependencies) {
+    this.executeClientScriptsUseCase = new ExecuteClientScriptsUseCase(dependencies);
+    this.setClientScriptsMappingUseCase = new SetClientScriptsMappingUseCase(dependencies);
+  }
+
+}

package/es/platform/client-scripts/behaviour/zclient-scripts-execution/adapters/presenters/Presenter.js

@@ -0,0 +1,21 @@
+export default class Presenter {
+  updateDependencies(state, updateState) {
+    this.updateState = updateState;
+    this.state = state;
+  }
+
+  updateClientScriptsMapping(clientScriptsMapping) {
+    this.state = { ...this.state,
+      clientScriptsMapping
+    };
+    this.updateState(this.state);
+  }
+
+  updateContext(context) {
+    this.state = { ...this.state,
+      context
+    };
+    this.updateState(this.state);
+  }
+
+}

package/es/platform/client-scripts/behaviour/zclient-scripts-execution/applications/usecases/AbstractUseCase.js

@@ -0,0 +1,15 @@
+export class AbstractUseCase {
+  constructor(dependencies) {
+    this.dependencies = dependencies;
+  }
+
+  updateDependencies(element, state, dispatch, updateState) {
+    const {
+      repository,
+      presenter
+    } = this.dependencies;
+    repository.updateDependencies(element, state, dispatch);
+    presenter.updateDependencies(state, updateState);
+  }
+
+}

package/es/platform/client-scripts/behaviour/zclient-scripts-execution/applications/usecases/ExecuteClientScriptsUseCase.js

@@ -0,0 +1,23 @@
+import { AbstractUseCase } from "./AbstractUseCase";
+export default class ExecuteClientScriptsUseCase extends AbstractUseCase {
+  execute(input) {
+    const {
+      repository
+    } = this.dependencies;
+    const {
+      host,
+      state,
+      dispatch
+    } = input;
+    const {
+      clientScripts
+    } = state.properties;
+    repository.updateDependencies(host, {
+      clientScriptsMapping: clientScripts,
+      context: input
+    }, dispatch);
+    const clientScriptExecutor = repository.getClientScriptExecutor();
+    clientScriptExecutor.executeTargetAction();
+  }
+
+}

package/es/platform/client-scripts/behaviour/zclient-scripts-execution/applications/usecases/SetClientScriptsMappingUseCase.js

@@ -0,0 +1,16 @@
+import { AbstractUseCase } from "./AbstractUseCase";
+export default class SetClientScriptsMappingUseCase extends AbstractUseCase {
+  execute(input) {
+    const {
+      presenter
+    } = this.dependencies;
+    const {
+      clientScripts,
+      state,
+      updateState
+    } = input;
+    presenter.updateDependencies(state, updateState);
+    presenter.updateClientScriptsMapping(clientScripts);
+  }
+
+}