import { useLingui, Trans } from '../../../../../../node_modules/@lingui/react/dist/index.mjs';
import React__default from 'react';
import Button from '../atoms/Button.mjs';
import { chromaticIgnoreClassName } from '../atoms/chromaticIgnoreClassName.mjs';
import { useTimeRemaining } from '../atoms/Countdown.mjs';
import VerticalTransition from '../atoms/VerticalTransition.mjs';
import EmailActionLayout from '../molecules/EmailActionLayout.mjs';
import { EmailProviderLink, emailProviderInfo } from '../molecules/EmailProviderLink.mjs';

/**
 * Base component for the two EmailConfirmation in B2B and B2C. This component controls the presentation
 * and do not have any of the B2C/B2B specific code
 */ const EmailConfirmationView = ({ emailDomain, email, goBack, resend, countdown, isSubmitting })=>{
    const { i18n: $__i18n, _: $__ } = useLingui();
    const [timeRemaining, active] = useTimeRemaining(countdown?.expiration ?? 0);
    return /*#__PURE__*/ React__default.createElement(EmailActionLayout, {
        header: $__i18n._({
            id: "emailConfirmation.title",
            message: "Check your email"
        }),
        description: /*#__PURE__*/ React__default.createElement(Trans, {
            id: "emailConfirmation.content",
            message: "An email was sent to <bold>{email}</bold>.",
            components: {
                bold: /*#__PURE__*/ React__default.createElement("b", null)
            },
            values: {
                email
            }
        }),
        additionalActions: /*#__PURE__*/ React__default.createElement(React__default.Fragment, null, /*#__PURE__*/ React__default.createElement(EmailProviderLink, {
            emailDomain: emailDomain,
            providerInfo: emailProviderInfo.gmail
        }), /*#__PURE__*/ React__default.createElement(EmailProviderLink, {
            emailDomain: emailDomain,
            providerInfo: emailProviderInfo.yahoo
        }), /*#__PURE__*/ React__default.createElement(EmailProviderLink, {
            emailDomain: emailDomain,
            providerInfo: emailProviderInfo.outlook
        }), resend && countdown && /*#__PURE__*/ React__default.createElement(Button, {
            variant: "outline",
            disabled: isSubmitting || active,
            onClick: ()=>{
                countdown.start(15);
                resend().catch(()=>countdown.clear());
            }
        }, /*#__PURE__*/ React__default.createElement(VerticalTransition, {
            className: chromaticIgnoreClassName(),
            primary: $__i18n._({
                id: "button.resendEmail",
                message: "Resend email"
            }),
            secondary: $__i18n._({
                id: "emailConfirmation.emailSent",
                message: "Email sent! Try again in {timeRemaining}s",
                values: {
                    timeRemaining: timeRemaining
                }
            }),
            triggered: active
        })), goBack && /*#__PURE__*/ React__default.createElement(Button, {
            variant: "ghost",
            onClick: goBack
        }, $__i18n._({
            id: "button.goBack",
            message: "Go back"
        })))
    });
};

export { EmailConfirmationView };
//# sourceMappingURL=EmailConfirmationView.mjs.map
