@shopgate/engage/orders/components/OrderDetails/OrderDetailsAuthenticate.js

Shopgate's ENGAGE library.

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}
 */var OrderDetailsAuthenticate=function OrderDetailsAuthenticate(){var _useRoute=useRoute(),pathname=_useRoute.pathname;var _useOrderDetails=useOrderDetails(),supportedCountries=_useOrderDetails.supportedCountries,countrySortOrder=_useOrderDetails.countrySortOrder,userLocation=_useOrderDetails.userLocation,validationErrors=_useOrderDetails.validationErrors,updateForm=_useOrderDetails.updateForm,showForm=_useOrderDetails.showForm,handleSubmit=_useOrderDetails.handleSubmit,defaultFormState=_useOrderDetails.defaultFormState,isUserLoggedIn=_useOrderDetails.isUserLoggedIn,isLoading=_useOrderDetails.isLoading,errorMessage=_useOrderDetails.errorMessage;var formConfig=useMemo(function(){return generateFormConfig({supportedCountries:supportedCountries,countrySortOrder:countrySortOrder,userLocation:userLocation});},[countrySortOrder,supportedCountries,userLocation]);var handleUpdate=useCallback(function(values){updateForm(values);},[updateForm]);var messages=useMemo(function(){if(!errorMessage){return null;}return[{type:'error',message:errorMessage}];},[errorMessage]);if(!showForm&&!messages){return null;}return React.createElement(Fragment,null,React.createElement(ResponsiveContainer,{appAlways:true,breakpoint:"<=xs"},messages&&React.createElement(MessageBar,{messages:messages,showIcons:true,classNames:{container:messageBarContainer}})),React.createElement("div",{className:container},React.createElement(ResponsiveContainer,{webOnly:true,breakpoint:">xs"},messages&&React.createElement(MessageBar,{messages:messages,showIcons:true,classNames:{container:messageBarContainer}})),showForm&&React.createElement(Fragment,null,React.createElement("p",null,React.createElement(I18n.Text,{string:"order_details.authenticate.instructions"}),!isUserLoggedIn&&React.createElement(Fragment,null,' ',React.createElement(Link,{className:loginLink,tag:"span",href:LOGIN_PATH,state:{redirect:{location:pathname}}},React.createElement(I18n.Text,{string:"order_details.authenticate.or_login"})))),React.createElement(FormBuilder,{className:form,name:"orderDetailsAuthenticate",config:formConfig,defaults:defaultFormState,validationErrors:validationErrors,handleUpdate:handleUpdate,onSubmit:handleSubmit}),React.createElement("div",null,React.createElement(RippleButton,{type:"secondary",onClick:handleSubmit,disabled:isLoading,className:submitButton},i18n.text('common.submit'))))));};export default OrderDetailsAuthenticate;