Integration guide

An integration guide with description of the solution and the integration steps to configure this solution. Clicking a step will trigger redirection to special page.

Install

import {IntegrationGuide} from '@xsolla/uikit/lib/_private';

Examples

Usage

<IntegrationGuide
          card={card}
          onClose={this.handleClose}
          onFinishLater={this.handleFinishLater}
          activeStepID={currentStepID}
          onStepClick={this.stepHandler}
          fetching={fetching}
          error={error}
          onRefresh={this.handleRefresh}
          onRequestHelp={this.handleRequestHelp}
          assignToAM={{
            disabled: !!disableAssignToAM,
            label: messages['assign-to-am-label'],
            description: messages['assign-to-am-description'],
            sentDescription: messages['assign-to-am-description-sent']
          }}
          assignToColleague={{
            label: messages['assign-to-colleague.label'],
            description: messages['assign-to-colleague.description'],
            show: showAssignToColleague
          }}
          onAssignToColleague={this.openAssignToColleagueModal}
          hideCardLabel={messages['app.upsell.banner.footer.hide']}
          onFinishGuide={this.openConfirmModal}
          onManualCompleteClick={this.onManualCompleteClick}
          onNextStepClick={this.onNextStepClick}
          needNotification={true}
        />

API

PropertyDescriptionTypeDefault
cardobject with card infoobject
onCloseon close guide panel handlerFunction
onFinishLaterfunction for postpone and close guideFunction
activeStepIDidentifier of active guide stepnumber, null
onStepClickon click step handlerFunction
fetchingfetching status of guideboolfalse
errorerror status of guideboolfalse
onRefreshhandler function for refresh guide data if error occurredFunction
onRequestHelpsend request help to xsollaFunction
assignToAMconfig for assign to AM item in dropdownObject
assignToColleagueconfig for assign to colleague item in dropdownObject
onAssignToColleagueassign card to account managerFunction
hideCardLabelflag for hiding option "hide card"bool
onFinishGuidefunction for finish and close guideFunction
onManualCompleteClickmanual completion step handlerFunction
onNextStepClickhandle transition to the next stepFunction
needNotificationflag for showing notification panelbool'false'
notificationClassNameclassName for notificationstringnull
notificationContainerIdcontainer id for createPortalstring'integration-guide-notification-portal'
classNamecustom className for guide fetching statusstring
stepsRefref to DOM node with integration stepsFunction