@shopgate/engage
Version:
Shopgate's ENGAGE library.
112 lines (111 loc) • 3.53 kB
JavaScript
import React, { useMemo, useCallback, Fragment } from 'react';
import { FormBuilder, I18n, Link, RippleButton, MessageBar, ResponsiveContainer } from '@shopgate/engage/components';
import { LOGIN_PATH, useRoute, i18n } from '@shopgate/engage/core';
import generateFormConfig from "./OrderDetailsAuthenticateForm.config";
import { useOrderDetails } from "../../hooks";
import { container, form, submitButton, loginLink, messageBarContainer } from "./OrderDetailsAuthenticate.style";
/**
* @returns {JSX}
*/
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
const OrderDetailsAuthenticate = () => {
const {
pathname
} = useRoute();
const {
supportedCountries,
countrySortOrder,
userLocation,
validationErrors,
updateForm,
showForm,
handleSubmit,
defaultFormState,
isUserLoggedIn,
isLoading,
errorMessage
} = useOrderDetails();
const formConfig = useMemo(() => generateFormConfig({
supportedCountries,
countrySortOrder,
userLocation
}), [countrySortOrder, supportedCountries, userLocation]);
const handleUpdate = useCallback(values => {
updateForm(values);
}, [updateForm]);
const messages = useMemo(() => {
if (!errorMessage) {
return null;
}
return [{
type: 'error',
message: errorMessage
}];
}, [errorMessage]);
if (!showForm && !messages) {
return null;
}
return /*#__PURE__*/_jsxs(_Fragment, {
children: [/*#__PURE__*/_jsx(ResponsiveContainer, {
appAlways: true,
breakpoint: "<=xs",
children: messages && /*#__PURE__*/_jsx(MessageBar, {
messages: messages,
showIcons: true,
classNames: {
container: messageBarContainer
}
})
}), /*#__PURE__*/_jsxs("div", {
className: container,
children: [/*#__PURE__*/_jsx(ResponsiveContainer, {
webOnly: true,
breakpoint: ">xs",
children: messages && /*#__PURE__*/_jsx(MessageBar, {
messages: messages,
showIcons: true,
classNames: {
container: messageBarContainer
}
})
}), showForm && /*#__PURE__*/_jsxs(_Fragment, {
children: [/*#__PURE__*/_jsxs("p", {
children: [/*#__PURE__*/_jsx(I18n.Text, {
string: "order_details.authenticate.instructions"
}), !isUserLoggedIn && /*#__PURE__*/_jsxs(_Fragment, {
children: [' ', /*#__PURE__*/_jsx(Link, {
className: loginLink,
tag: "span",
href: LOGIN_PATH,
state: {
redirect: {
location: pathname
}
},
children: /*#__PURE__*/_jsx(I18n.Text, {
string: "order_details.authenticate.or_login"
})
})]
})]
}), /*#__PURE__*/_jsx(FormBuilder, {
className: form,
name: "orderDetailsAuthenticate",
config: formConfig,
defaults: defaultFormState,
validationErrors: validationErrors,
handleUpdate: handleUpdate,
onSubmit: handleSubmit
}), /*#__PURE__*/_jsx("div", {
children: /*#__PURE__*/_jsx(RippleButton, {
type: "secondary",
onClick: handleSubmit,
disabled: isLoading,
className: submitButton,
children: i18n.text('common.submit')
})
})]
})]
})]
});
};
export default OrderDetailsAuthenticate;