@rabbitio/ui-kit 1.0.0-beta.8 → 1.0.0-beta.80

package/src/ui-kit/components/organisms/Dialog/DialogStep/DialogStep.jsx

@@ -0,0 +1,538 @@
+import React, { useEffect, useRef, useState } from "react";
+import PropTypes from "prop-types";
+
+import { logErrorOrOutputToConsole } from "../../../../../common-apis/errorUtils.js";
+
+import arrowTosca from "../../../../assets/wrappedImages/arrowTosca.jsx";
+import arrowWhite from "../../../../assets/wrappedImages/arrowWhite.jsx";
+
+import s from "./dialog-step.module.scss";
+import { AssetIcon } from "../../../atoms/AssetIcon/AssetIcon.jsx";
+import { ICON_ROTATE_OPTIONS, LinkButton } from "../../../atoms/buttons/LinkButton/LinkButton.jsx";
+import { BackgroundTitle } from "../../../atoms/BackgroundTitle/BackgroundTitle.jsx";
+import { DialogButtons } from "../DialogButtons/DialogButtons.jsx";
+import { LoadingDots } from "../../../atoms/LoadingDots/LoadingDots.jsx";
+import { DIALOG_TRANSITION_STEP_DURATION } from "../Dialog.jsx";
+
+export const DIALOG_STEP_CLASS = "dialog-step";
+
+/**
+ * Step component, part of the DialogWithSteps modal component. This component should be used inside the primary dialog component.
+ *
+ * @component
+ * @param {Object} props - The props object.
+ * @param {string} props.stepName - Step name, specified on the root dialog level, used as an ID for dialog navigation.
+ * @param {React.ReactNode} props.children - Content of the dialog step. Supports both raw content and components.
+ * @param {string} props.image - Illustration/icon at the top, path to an image.
+ * @param {React.ComponentType} props.ImageRaw - Illustration/icon at the top, the image component to be inserted.
+ * @param {string} props.title - Step title.
+ * @param {string} props.titleIcon - Icon next to the step title, path to an image.
+ * @param {Coin} props.titleIconCoin - Coin to be shown as an AssetIcon next to the step title.
+ * @param {function} props.coinToIconPaths - Function returning icon paths by Coin.
+ * @param {boolean} props.titleLoadingDots - Show loading dots next to the title or not.
+ * @param {string} props.subtitle - Step subtitle.
+ * @param {string} props.backButtonText - Secondary button title.
+ * @param {function} props.backButtonClick - Secondary button click handler.
+ * @param {string} props.backButtonTo - Secondary button link.
+ * @param {string} props.confirmButtonText - Primary button title.
+ * @param {function} props.confirmButtonClick - Primary button click handler.
+ * @param {string} props.confirmButtonLink - Primary button link.
+ * @param {boolean} props.primaryButtonLoader - Enable loader for the primary button.
+ * @param {boolean} props.fixedButtons - Enable fixed buttons in the bottom for mobile devices.
+ * @param {boolean} props.showCornerBackButton - Forcefully enable or disable blue corner back button.
+ * @param {string} props.cornerBackButtonTitle - Blue corner back button title.
+ * @param {function} props.cornerBackButtonClick - Blue corner back button click handler.
+ * @param {boolean} props.bigButtonMargins - Increase button margins.
+ * @param {boolean} props.noButtonMargins - Decrease button margins.
+ * @param {boolean} props.headerTitleLeft - Align header title to the left. Default: false.
+ * @param {boolean} props.subtitleSmallMargin - Reduce the margin under the subtitle.
+ * @param {boolean} props.subtitleNoMargin - Disable the margin under the subtitle.
+ * @param {boolean} props.showBackgroundTitle - Enable the semi-transparent secondary background title.
+ * @param {function} props.setClickTrigger - Function to set up an external trigger for the primary button.
+ * @param {boolean} props.breakSubtitleWords - Enable word-break for subtitles. Default: false.
+ * @param {string} props.contentAlign - Receives "left", "center", "right". Controls the step content container alignment.
+ * @param {Object} props.controls - Dialog-to-step connection object, required for multi-step dialog windows.
+ * @param {string} props.width - Width in pixels, formatted as "1000px" and passed as a string. Values should be used from constants.
+ * @param {string} props.height - Height in pixels, formatted as "1000px" and passed as a string. Values should be used from constants.
+ * @param {string} props.backgroundImage - Background image, path to an image.
+ * @param {string} props.backgroundImageMobile - Background image for mobiles, path to an image.
+ * @param {boolean} props.isSecondaryButtonBig - Changes the secondary button style from link to a secondary-button. Default: false.
+ * @returns {JSX.Element} React component
+ */
+export const DialogStep = ({
+    stepName = "",
+    children = "",
+    image = "",
+    ImageRaw,
+    title = "",
+    titleIcon = "",
+    titleIconCoin,
+    coinToIconPaths = () => {},
+    titleLoadingDots = false,
+    subtitle = "",
+    backButtonText = "",
+    backButtonClick = () => {},
+    backButtonTo = "",
+    confirmButtonText = "",
+    confirmButtonClick = () => {},
+    confirmButtonLink = "",
+    primaryButtonLoader = false,
+    fixedButtons = false,
+    showCornerBackButton = null,
+    cornerBackButtonTitle = null,
+    cornerBackButtonClick = null,
+    bigButtonMargins = false,
+    noButtonMargins = false,
+    headerTitleLeft = false,
+    subtitleSmallMargin = false,
+    subtitleNoMargin = false,
+    showBackgroundTitle = true,
+    setClickTrigger = () => {},
+    breakSubtitleWords = false,
+    contentAlign = "left",
+    controls = {},
+    width = "",
+    height,
+    backgroundImage,
+    backgroundImageMobile,
+    isSecondaryButtonBig = false,
+}) => {
+    const {
+        currentStep = null,
+        isCurrentStep = () => {},
+        previousStep,
+        getStepClass = () => {},
+        updateDialogConfiguration,
+        provideCurrentStepRef,
+        animationConfiguration,
+        disableAnimation,
+        showCornerButtonForStep,
+        scrollDialogToTop = () => {},
+        updateButtonsConfiguration = () => {},
+        clearButtonsConfiguration = () => {},
+        buttonControllingStep,
+        updateButtonControllingStep = () => {},
+        updateAnimationConfiguration = () => {},
+        inline,
+    } = controls;
+
+    const [isMultiStep, setIsMultiStep] = useState(false);
+    const [stepClass, setStepClass] = useState("");
+    const [wrapperDirectionSubclass, setWrapperDirectionSubclass] = useState("");
+    const [unmountOnAnimationEndTrigger, setUnmountOnAnimationEndTrigger] = useState(0);
+    const [stepMounted, setStepMounted] = useState(false);
+    const [isTopImagePassed, setIsTopImagePassed] = useState(false);
+
+    const currentStepRef = useRef();
+    // const { t } = useTranslation();
+
+    useEffect(() => setIsTopImagePassed(!!image || !!ImageRaw), [image, ImageRaw]);
+
+    useEffect(() => {
+        if (controls !== {} && stepName !== "") setIsMultiStep(true);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    const handleTransitionEnd = event => {
+        if (
+            isMultiStep &&
+            isCurrentStep(stepName) &&
+            event.propertyName === "opacity" &&
+            event.target.classList[0] === s[DIALOG_STEP_CLASS]
+        ) {
+            disableAnimation(animationConfiguration.animateHeightTransitionEnabled);
+        }
+
+        if (
+            isMultiStep &&
+            unmountOnAnimationEndTrigger &&
+            event.propertyName === "opacity" &&
+            event.target.classList[0] === s[DIALOG_STEP_CLASS]
+        ) {
+            clearButtonsConfiguration();
+            scrollDialogToTop();
+            setStepMounted(false);
+            setUnmountOnAnimationEndTrigger(0);
+        }
+    };
+
+    useEffect(() => {
+        var multiStep = false;
+        if (controls !== {} && stepName !== "") {
+            setIsMultiStep(true);
+            multiStep = true;
+        }
+
+        if (!multiStep && fixedButtons) {
+            logErrorOrOutputToConsole(
+                new Error(
+                    "DialogStep parameter 'fixedButtons' works only with controls connected between the DialogWithSteps and DialogStep components. Unless the controls are configured the 'fixedButtons' parameter will be ignored."
+                )
+            );
+        }
+
+        if (multiStep) {
+            if (getStepClass(stepName) === "current") setStepMounted(true);
+
+            if (stepClass === "current" && getStepClass(stepName) !== "current")
+                setUnmountOnAnimationEndTrigger(prev => prev + 1);
+
+            setWrapperDirectionSubclass(
+                getStepClass(stepName) === "current" && animationConfiguration.currentStepAnimationEnabled
+                    ? stepClass === "prev"
+                        ? "appear-from-left"
+                        : "appear-from-right"
+                    : ""
+            );
+        } else {
+            if (width !== "")
+                logErrorOrOutputToConsole(
+                    new Error(
+                        "Single DialogStep does not support 'width' parameter, since it requires controls to be connected. Pass 'width' to the Dialog component to set the width of the modal window."
+                    )
+                );
+            setStepMounted(true);
+        }
+
+        setStepClass(multiStep ? getStepClass(stepName) : "current");
+        if (multiStep && isCurrentStep(stepName)) {
+            setTimeout(
+                () => updateButtonControllingStep(stepName),
+                buttonControllingStep === "" ? 0 : DIALOG_TRANSITION_STEP_DURATION
+            );
+
+            setTimeout(() => {
+                updateButtonsConfiguration(
+                    {
+                        primaryButtonTitle: confirmButtonText,
+                        primaryButtonOnClick: resetButtonLoader => confirmButtonClick(resetButtonLoader),
+                        primaryButtonLoader: primaryButtonLoader,
+                        primaryButtonTo: confirmButtonLink,
+                        primaryButtonSetClickTrigger: setClickTrigger,
+                        secondaryButtonTitle: backButtonText,
+                        secondaryButtonOnClick: backButtonClick,
+                        secondaryButtonTo: backButtonTo,
+                        fixedButtonsEnabled: fixedButtons,
+                    },
+                    stepName
+                );
+
+                updateAnimationConfiguration(prev => {
+                    return {
+                        ...prev,
+                        hideMobileBottomButtonSection: false,
+                    };
+                });
+            }, DIALOG_TRANSITION_STEP_DURATION * 3);
+
+            updateDialogConfiguration(prev => {
+                return {
+                    ...prev,
+                    cornerBackButtonTitle: cornerBackButtonTitle,
+                    customWidth: width,
+                };
+            });
+            provideCurrentStepRef(currentStepRef);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [currentStep]);
+
+    useEffect(() => {
+        if (isMultiStep && isCurrentStep(stepName) && fixedButtons && (confirmButtonText || backButtonText)) {
+            updateButtonsConfiguration(
+                {
+                    primaryButtonTitle: confirmButtonText,
+                    primaryButtonOnClick: resetButtonLoader => confirmButtonClick(resetButtonLoader),
+                    primaryButtonLoader: primaryButtonLoader,
+                    primaryButtonTo: confirmButtonLink,
+                    primaryButtonSetClickTrigger: setClickTrigger,
+                    secondaryButtonTitle: backButtonText,
+                    secondaryButtonOnClick: backButtonClick,
+                    secondaryButtonTo: backButtonTo,
+                    fixedButtonsEnabled: fixedButtons,
+                },
+                stepName
+            );
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        confirmButtonText,
+        confirmButtonClick,
+        primaryButtonLoader,
+        confirmButtonLink,
+        setClickTrigger,
+        backButtonText,
+        backButtonClick,
+        backButtonTo,
+        currentStep,
+    ]);
+
+    const { assetIconSrc, assetIconProtocolSrc, fallbackSrc } =
+        titleIconCoin && coinToIconPaths ? coinToIconPaths(titleIconCoin) : {};
+
+    return (
+        <div
+            className={
+                s[DIALOG_STEP_CLASS] +
+                " " +
+                s[stepClass] +
+                (!isMultiStep || !animationConfiguration?.currentStepAnimationEnabled
+                    ? " " + s["animation-disabled"]
+                    : "") +
+                (!isMultiStep ? " " + s["single-step"] : "") +
+                (backgroundImage || backgroundImageMobile ? " " + s["with-background"] : "") +
+                (inline ? " " + s["inline"] : "")
+            }
+            ref={currentStepRef}
+            onTransitionEnd={handleTransitionEnd}
+            style={height ? { height: height } : null}
+        >
+            {stepMounted ? (
+                <>
+                    {backgroundImage || backgroundImageMobile ? (
+                        <div className={s["dialog-step-background-image"] + " " + s[stepClass]}>
+                            {backgroundImage ? (
+                                <img
+                                    src={backgroundImage}
+                                    className={
+                                        s["dialog-step-background-image-desktop"] +
+                                        " " +
+                                        stepClass +
+                                        (!backgroundImageMobile ? " " + s["primary"] : "")
+                                    }
+                                    alt={"dialog step background"}
+                                    loading="lazy"
+                                />
+                            ) : null}
+                            {backgroundImageMobile ? (
+                                <img
+                                    src={backgroundImageMobile}
+                                    className={
+                                        s["dialog-step-background-image-mobile"] +
+                                        " " +
+                                        stepClass +
+                                        (!backgroundImage ? " " + s["primary"] : "")
+                                    }
+                                    alt={"dialog step background"}
+                                    loading="lazy"
+                                />
+                            ) : null}
+                        </div>
+                    ) : null}
+                    <div
+                        className={
+                            s["dialog-step-wrapper"] +
+                            " " +
+                            s[stepClass] +
+                            " " +
+                            s[wrapperDirectionSubclass] +
+                            (inline ? " " + s["inline"] : "")
+                        }
+                    >
+                        {isMultiStep && showCornerButtonForStep(stepName, showCornerBackButton) ? (
+                            <div className={s["dialog-step-wrapper-back-button"]}>
+                                <LinkButton
+                                    onClick={cornerBackButtonClick ? cornerBackButtonClick : previousStep}
+                                    content={
+                                        cornerBackButtonTitle
+                                            ? cornerBackButtonTitle
+                                            : // : t("organisms.DialogWithSteps.DialogStep.default-back-button-title")
+                                              "Back"
+                                    }
+                                    IconComponent={backgroundImage || backgroundImageMobile ? arrowWhite : arrowTosca}
+                                    iconRotate={ICON_ROTATE_OPTIONS.rotate90}
+                                    isColored={backgroundImage || backgroundImageMobile ? false : undefined}
+                                />
+                            </div>
+                        ) : null}
+
+                        <div
+                            className={
+                                s["dialog-step-wrapper-header"] +
+                                (headerTitleLeft ? " " + s["text-left"] : "") +
+                                (backgroundImage || backgroundImageMobile ? " " + s["with-background-image"] : "")
+                            }
+                        >
+                            {image ? (
+                                <img
+                                    src={image}
+                                    alt="dialog popup logo"
+                                    className={s["dialog-step-wrapper-header-logo"]}
+                                    loading="lazy"
+                                />
+                            ) : ImageRaw ? (
+                                <div className={s["dialog-step-wrapper-header-logo"]}>
+                                    <ImageRaw />
+                                </div>
+                            ) : null}
+
+                            <div
+                                className={
+                                    s["dialog-step-wrapper-header-title"] +
+                                    (!isTopImagePassed ? " " + s["without-logo"] : "") +
+                                    (!isTopImagePassed && headerTitleLeft ? " " + s["close-button-padding"] : "") +
+                                    (inline ? " " + s["no-close-button-padding"] : "")
+                                }
+                            >
+                                {titleIconCoin ? (
+                                    <div className={s["dialog-step-wrapper-header-title-coin-icon"]}>
+                                        <AssetIcon
+                                            assetIconSrc={assetIconSrc}
+                                            assetIconProtocolSrc={assetIconProtocolSrc}
+                                            fallbackSrc={fallbackSrc}
+                                        />
+                                    </div>
+                                ) : titleIcon ? (
+                                    <div className={s["dialog-step-wrapper-header-title-icon"]}>
+                                        <img src={titleIcon} alt="coin icon to send" loading="lazy" />
+                                    </div>
+                                ) : null}
+                                {titleLoadingDots ? (
+                                    <div className={s["dialog-step-wrapper-header-title-loading"]}>
+                                        <LoadingDots isColored />
+                                    </div>
+                                ) : (
+                                    ""
+                                )}
+                                <div className={s["dialog-step-wrapper-header-title-text"]}>
+                                    {!isTopImagePassed && showBackgroundTitle ? <BackgroundTitle text={title} /> : null}
+                                    <h5
+                                        className={
+                                            s["dialog-step-wrapper-header-title-text-content"] +
+                                            (!isTopImagePassed ? " " + s["without-logo"] : "") +
+                                            (backgroundImage || backgroundImageMobile ? " " + s["white"] : "")
+                                        }
+                                    >
+                                        {title}
+                                    </h5>
+                                </div>
+                            </div>
+
+                            {subtitle ? (
+                                <p
+                                    className={
+                                        s["dialog-step-wrapper-header-text"] +
+                                        ` ${!isTopImagePassed ? s["without-logo"] : ""} ${
+                                            subtitleSmallMargin ? s["small-margin"] : ""
+                                        }${subtitleNoMargin ? s["no-margin"] : ""} ${
+                                            headerTitleLeft ? s["text-left"] : ""
+                                        } ${breakSubtitleWords ? s["break-words"] : ""} ${
+                                            backgroundImage || backgroundImageMobile ? s["white"] : ""
+                                        }`
+                                    }
+                                >
+                                    {subtitle}
+                                </p>
+                            ) : null}
+                        </div>
+                        <div className={s["dialog-step-wrapper-content"] + " " + s["align-" + contentAlign]}>
+                            {children}
+                        </div>
+
+                        {backButtonText || confirmButtonText ? (
+                            <div
+                                className={
+                                    s["dialog-step-wrapper-buttons"] +
+                                    ` ${bigButtonMargins ? s["big-margin"] : ""} ${
+                                        noButtonMargins ? s["no-margin"] : ""
+                                    } ${isSecondaryButtonBig ? s["space-between-layout"] : ""}`
+                                }
+                            >
+                                <DialogButtons
+                                    primaryButtonTitle={confirmButtonText}
+                                    primaryButtonOnClick={resetButtonLoader => confirmButtonClick(resetButtonLoader)}
+                                    primaryButtonLoader={primaryButtonLoader}
+                                    primaryButtonTo={confirmButtonLink}
+                                    primaryButtonSetClickTrigger={setClickTrigger}
+                                    secondaryButtonTitle={backButtonText}
+                                    secondaryButtonOnClick={backButtonClick}
+                                    secondaryButtonTo={backButtonTo}
+                                    secondaryButtonBig={isSecondaryButtonBig}
+                                    withBackgroundImage={!!backgroundImage || !!backgroundImageMobile}
+                                    hideOnMobiles={isMultiStep && fixedButtons && (backButtonText || confirmButtonText)}
+                                />
+                            </div>
+                        ) : (
+                            ""
+                        )}
+                    </div>
+                </>
+            ) : null}
+        </div>
+    );
+};
+
+DialogStep.propTypes = {
+    stepName: PropTypes.string,
+    children: PropTypes.node,
+    image: PropTypes.string,
+    title: PropTypes.string,
+    ImageRaw: PropTypes.func,
+    titleIcon: PropTypes.string,
+    titleIconCoin: PropTypes.object,
+    coinToIconPaths: PropTypes.func,
+    titleLoadingDots: PropTypes.bool,
+    subtitle: PropTypes.string,
+    backButtonText: PropTypes.string,
+    backButtonClick: PropTypes.func,
+    backButtonTo: PropTypes.string,
+    confirmButtonText: PropTypes.string,
+    confirmButtonClick: PropTypes.func,
+    confirmButtonLink: PropTypes.string,
+    primaryButtonLoader: PropTypes.bool,
+    fixedButtons: PropTypes.bool,
+    showCornerBackButton: PropTypes.bool,
+    cornerBackButtonTitle: PropTypes.string,
+    cornerBackButtonClick: PropTypes.func,
+    bigButtonMargins: PropTypes.bool,
+    noButtonMargins: PropTypes.bool,
+    headerTitleLeft: PropTypes.bool,
+    subtitleSmallMargin: PropTypes.bool,
+    subtitleNoMargin: PropTypes.bool,
+    showBackgroundTitle: PropTypes.bool,
+    setClickTrigger: PropTypes.func,
+    breakSubtitleWords: PropTypes.bool,
+    contentAlign: PropTypes.string,
+    controls: PropTypes.object,
+    width: PropTypes.oneOf(["550px", "600px", "700px", "750px", "800px", "1000px"]),
+    height: PropTypes.string,
+    backgroundImage: PropTypes.string,
+    backgroundImageMobile: PropTypes.string,
+    isSecondaryButtonBig: PropTypes.bool,
+};
+
+DialogStep.defaultProps = {
+    stepName: "",
+    children: null,
+    image: "",
+    title: "",
+    titleIcon: "",
+    coinToIconPaths: () => ({}),
+    titleLoadingDots: false,
+    subtitle: "",
+    backButtonText: "",
+    backButtonClick: () => {},
+    backButtonTo: "",
+    confirmButtonText: "",
+    confirmButtonClick: () => {},
+    confirmButtonLink: "",
+    primaryButtonLoader: false,
+    fixedButtons: false,
+    showCornerBackButton: null,
+    cornerBackButtonTitle: null,
+    cornerBackButtonClick: null,
+    bigButtonMargins: false,
+    noButtonMargins: false,
+    headerTitleLeft: false,
+    subtitleSmallMargin: false,
+    subtitleNoMargin: false,
+    showBackgroundTitle: true,
+    setClickTrigger: () => {},
+    breakSubtitleWords: false,
+    contentAlign: "left",
+    controls: {},
+    height: null,
+    backgroundImage: "",
+    backgroundImageMobile: "",
+    isSecondaryButtonBig: false,
+};