@stokr/components-library
Version:
STOKR - Components Library
155 lines (153 loc) • 7.61 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.VerifyEmailModal = void 0;
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _styledComponents = _interopRequireDefault(require("styled-components"));
var sc = _interopRequireWildcard(require("../../constants/style"));
var _Modal = require("../Modal/Modal");
var _Text = _interopRequireDefault(require("../Text/Text.styles"));
var _Grid = require("../Grid/Grid.styles");
var _RegisterConfirmModal = require("../RegisterConfirmModal/RegisterConfirmModal.styles");
var _ComponentWrapper = _interopRequireDefault(require("../ComponentWrapper/ComponentWrapper.styles"));
var _Form = require("../Form/Form.styles");
var _Button = _interopRequireDefault(require("../Button/Button.styles"));
var _formik = require("formik");
var Yup = _interopRequireWildcard(require("yup"));
var _Form2 = _interopRequireDefault(require("../Form/Form"));
var _Input = _interopRequireDefault(require("../Input/Input"));
var _customHooks = require("../../utils/customHooks");
var _FA = require("../2FA");
var _globalVariables = require("../../constants/globalVariables");
const _excluded = ["id", "isModalOpen", "onModalClose", "continueUrl", "isSuccess"];
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
const RedBar = _styledComponents.default.div.withConfig({
displayName: "VerifyEmailModal__RedBar",
componentId: "sc-13smx1f-0"
})(["background:", ";bottom:0;height:30%;position:absolute;right:0;width:50%;"], sc.RED_BASE_HEX);
const VerifyEmailModal = _ref => {
let {
id,
isModalOpen,
onModalClose,
continueUrl,
isSuccess
} = _ref,
props = _objectWithoutProperties(_ref, _excluded);
return /*#__PURE__*/_react.default.createElement(_Modal.Modal, {
isOpen: isModalOpen,
onClose: onModalClose
//closeIsFullHeight
,
id: id
}, isSuccess ? renderSuccessModal(continueUrl) : RenderErrorModal(props));
};
exports.VerifyEmailModal = VerifyEmailModal;
const renderSuccessModal = continueUrl => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_FA.Sucess2FA, {
onClick: () => {
window.open(continueUrl, '_self');
},
textRight: "We have successfully verified your email!"
// textRight="You will not be asked for your 2FA code next time you log in."
}));
const RenderErrorModal = props => {
const {
error,
isActionLoading,
popupError,
popupSuccess,
onResend,
onModalSwitch
} = props;
const {
isDisabled,
secondsRemaining,
startCooldown
} = (0, _customHooks.useCooldown)(60);
const userEmail = error && error.email;
//send activation email automatically if link is expired
_react.default.useEffect(() => {
// if (error?.code === 'auth/invalid-action-code') {
// onModalSwitch && onModalSwitch()
// }
if (error !== null && error !== void 0 && error.email && !isDisabled) {
startCooldown();
onResend({
email: error.email
});
}
}, [error]);
const validationSchema = Yup.object().shape({
email: Yup.string().matches(_globalVariables.emailRegex, "Oops, that's not a valid address").required('Oops, this can‘t be blank')
});
return /*#__PURE__*/_react.default.createElement(_Grid.Row, null, /*#__PURE__*/_react.default.createElement(_Grid.Column, {
part: 8
}, /*#__PURE__*/_react.default.createElement(_Modal.ModalInner, {
modalTop: true
}, /*#__PURE__*/_react.default.createElement(_Text.default, null, /*#__PURE__*/_react.default.createElement("h3", null, "Oops..."), /*#__PURE__*/_react.default.createElement("p", null, (error === null || error === void 0 ? void 0 : error.message) || 'Something went wrong.'))), /*#__PURE__*/_react.default.createElement(_Modal.ModalInner, {
modalBot: true
})), /*#__PURE__*/_react.default.createElement(_Grid.Column, {
part: 8
}, /*#__PURE__*/_react.default.createElement(_Modal.ModalInner, null, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_formik.Formik, {
initialValues: {
email: userEmail || ''
},
validationSchema: validationSchema,
validateOnBlur: true,
validateOnChange: true,
onSubmit: values => {
startCooldown();
onResend(values);
}
}, _ref2 => {
let {
values,
errors,
touched,
handleBlur,
handleChange
} = _ref2;
const submitDisabled = !values.email || !!errors.email || isDisabled || isActionLoading === 'resend';
return /*#__PURE__*/_react.default.createElement(_Form2.default, null, /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
noPadding: true
}, /*#__PURE__*/_react.default.createElement(_Form.FormField, null, /*#__PURE__*/_react.default.createElement(_Input.default, {
id: "verify-email",
name: "email",
type: "email",
label: "Your email",
value: values.email,
onChange: handleChange,
onBlur: handleBlur,
error: !!errors.email,
touched: !!touched.email
}), /*#__PURE__*/_react.default.createElement(_Form.FormError, {
show: errors.email && touched.email
}, errors.email))), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
noPaddingBottom: true,
noPaddingHorizontal: true
}, /*#__PURE__*/_react.default.createElement(_Button.default, {
type: "submit",
disabled: submitDisabled
}, isActionLoading === 'resend' ? 'Resending email' : 'Resend email')), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
paddingVeticalHalf: true,
noPaddingHorizontal: true
}, /*#__PURE__*/_react.default.createElement(_Form.FormError, {
show: popupError.popup === 'resend'
}, popupError.message)), isDisabled && /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
noPaddingVertical: true,
noPaddingHorizontal: true
}, /*#__PURE__*/_react.default.createElement(_Form.FormError, {
show: isDisabled
}, "You can try again in ".concat(secondsRemaining, " seconds"))));
})))));
};
VerifyEmailModal.propTypes = {
isModalOpen: _propTypes.default.bool.isRequired,
onModalClose: _propTypes.default.func.isRequired
};
var _default = exports.default = VerifyEmailModal;