@talend/react-components/lib/AppGuidedTour/AppGuidedTour.component.js

Set of react components.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.DEFAULT_LOCAL_STORAGE_KEY = void 0;
var _react = require("react");
var _reactI18next = require("react-i18next");
var _useLocalStorage = _interopRequireDefault(require("react-use/lib/useLocalStorage"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _constants = _interopRequireDefault(require("../constants"));
var _GuidedTour = _interopRequireDefault(require("../GuidedTour"));
var _Stepper = _interopRequireDefault(require("../Stepper"));
var _Toggle = _interopRequireDefault(require("../Toggle"));
var _DemoContentStep = _interopRequireDefault(require("./DemoContentStep.component"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const DEMO_CONTENT_STEP_ID = 1;
const DEFAULT_LOCAL_STORAGE_KEY = exports.DEFAULT_LOCAL_STORAGE_KEY = 'app-guided-tour-viewed';
function AppGuidedTour({
  isOpen,
  appName,
  steps,
  localStorageKey = DEFAULT_LOCAL_STORAGE_KEY,
  demoContentSteps,
  onRequestOpen,
  onImportDemoContent,
  onRequestClose,
  welcomeStepBody = null,
  tourId,
  ...rest
}) {
  const {
    t
  } = (0, _reactI18next.useTranslation)(_constants.default);
  const [isAlreadyViewed, setIsAlreadyViewed] = (0, _useLocalStorage.default)(localStorageKey, false);
  const [importDemoContent, setImportDemoContent] = (0, _react.useState)(demoContentSteps && !isAlreadyViewed);
  const [currentStep, setCurrentStep] = (0, _react.useState)(0);
  // Reset currentStep to 0 when tour is opened
  (0, _react.useEffect)(() => {
    if (isOpen) {
      setCurrentStep(0);
    }
  }, [isOpen]);
  const isNavigationDisabled = importDemoContent && currentStep === DEMO_CONTENT_STEP_ID && _Stepper.default.isStepsLoading(demoContentSteps);
  const isImportSuccessFul = (demoContentSteps === null || demoContentSteps === void 0 ? void 0 : demoContentSteps.length) && _Stepper.default.isAllSuccessful(demoContentSteps);
  (0, _react.useEffect)(() => {
    if (!isAlreadyViewed) {
      onRequestOpen();
    }
  }, [isAlreadyViewed, onRequestOpen]);
  (0, _react.useEffect)(() => {
    let timeoutId = null;
    if (isImportSuccessFul) {
      timeoutId = setTimeout(() => {
        setCurrentStep(prev => prev === DEMO_CONTENT_STEP_ID ? DEMO_CONTENT_STEP_ID + 1 : prev);
      }, _Stepper.default.SHOW_COMPLETED_TRANSITION_TIMER);
    }
    return () => clearTimeout(timeoutId);
  }, [isImportSuccessFul]);
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_GuidedTour.default, {
    tourId: tourId,
    isOpen: isOpen,
    showButtons: !isNavigationDisabled,
    showCloseButton: !isNavigationDisabled,
    disableKeyboardNavigation: isNavigationDisabled,
    disableAllInteractions: isNavigationDisabled,
    getCurrentStep: step => {
      if (importDemoContent && step === DEMO_CONTENT_STEP_ID && currentStep === DEMO_CONTENT_STEP_ID - 1) {
        onImportDemoContent();
      }
      setCurrentStep(step);
    },
    goToStep: currentStep,
    onRequestClose: () => {
      onRequestClose();
      setIsAlreadyViewed(true);
      if (importDemoContent) {
        setImportDemoContent(false);
        setCurrentStep(Math.max(0, currentStep - 1));
      }
    },
    steps: [{
      content: {
        header: t('GUIDED_TOUR_WELCOME_STEP_HEADER', {
          appName,
          defaultValue: 'Welcome to {{appName}}'
        }),
        body: () => {
          return welcomeStepBody || /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
            children: [t('GUIDED_TOUR_WELCOME_STEP_BODY', {
              defaultValue: `If you're new, you may want to take a quick tour of the tool now.
										 If not, you can replay the tour from the user menu.`
            }), demoContentSteps && /*#__PURE__*/(0, _jsxRuntime.jsx)("form", {
              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Toggle.default, {
                id: "app-guided-tour__import-demo-content-toggle",
                label: t('GUIDED_TOUR_IMPORT_DEMO_CONTENT', {
                  defaultValue: 'Import demo content'
                }),
                onChange: event => {
                  setImportDemoContent(event.target.checked);
                },
                checked: importDemoContent,
                "data-feature": tourId && `guidedtour.${tourId}.demo`
              })
            })]
          });
        }
      }
    }, importDemoContent && {
      content: {
        header: t('GUIDED_TOUR_DEMO_CONTENT_STEP_HEADER', {
          defaultValue: 'Importing demo content'
        }),
        body: () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_DemoContentStep.default, {
          demoContentSteps: demoContentSteps
        })
      }
    }, ...steps].filter(Boolean),
    ...rest
  });
}
AppGuidedTour.propTypes = {
  isOpen: _propTypes.default.bool.isRequired,
  appName: _propTypes.default.string.isRequired,
  localStorageKey: _propTypes.default.string,
  steps: _GuidedTour.default.propTypes.steps,
  welcomeStepBody: _propTypes.default.node,
  demoContentSteps: _Stepper.default.propTypes.steps,
  onRequestOpen: _propTypes.default.func.isRequired,
  onImportDemoContent: _propTypes.default.func,
  onRequestClose: _propTypes.default.func.isRequired,
  tourId: _propTypes.default.string
};
var _default = exports.default = AppGuidedTour;
//# sourceMappingURL=AppGuidedTour.component.js.map