UNPKG

@shopgate/engage

Version:
4 lines 2.8 kB
function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}import React from'react';import{css}from'glamor';import{themeConfig}from'@shopgate/engage';import{FormBuilder,SurroundPortals}from'@shopgate/engage/components';import{StylePresets}from'@shopgate/engage/components/Form';import generateFormConfig from"./CheckoutPickupContactForm.config";import Section from"./CheckoutSection";import{useCheckoutContext}from"../../hooks/common";import{CHECKOUT_PICKUP_CONTACT_FORM}from"../../constants";var variables=themeConfig.variables;var styles={root:css({padding:16,paddingTop:0,display:'flex',flex:'0 0 auto',flexDirection:'column'}).toString(),h1:css({fontSize:24,marginBottom:4,color:'var(--color-text-high-emphasis)'}).toString(),h2:css({fontSize:16}).toString(),form:css(_extends({' .pickupFormPickupPerson':{marginTop:variables.gap.small},' .pickupFormPickupPerson .me':{marginRight:variables.gap.big},' .pickupFormPickupPerson .label span':{color:'var(--color-text-high-emphasis)',fontWeight:'bold'},' .pickupFormPickupPerson .radioGroup':{marginTop:variables.gap.small,flexDirection:'row',' .uncheckedIcon':{color:'var(--color-text-medium-emphasis)'}}},StylePresets.OUTLINED_FORM_FIELDS)).toString()};/** * PickupContactForm * @returns {JSX} */var PickupContactForm=function PickupContactForm(){var _useCheckoutContext=useCheckoutContext(),supportedCountries=_useCheckoutContext.supportedCountries,countrySortOrder=_useCheckoutContext.countrySortOrder,userLocation=_useCheckoutContext.userLocation,defaultPickupPersonState=_useCheckoutContext.defaultPickupPersonState,formValidationErrors=_useCheckoutContext.formValidationErrors,formSetValues=_useCheckoutContext.formSetValues,isPickupContactSelectionEnabled=_useCheckoutContext.isPickupContactSelectionEnabled;var formConfig=React.useMemo(function(){return generateFormConfig({supportedCountries:supportedCountries,countrySortOrder:countrySortOrder,userLocation:userLocation});},[countrySortOrder,supportedCountries,userLocation]);var handleUpdate=React.useCallback(function(values){formSetValues(values);},[formSetValues]);if(!isPickupContactSelectionEnabled){return null;}return React.createElement(SurroundPortals,{portalName:CHECKOUT_PICKUP_CONTACT_FORM},React.createElement("div",{className:styles.root},React.createElement(Section,{title:"checkout.pickup_contact.headline",hasForm:true},React.createElement(FormBuilder,{className:styles.form,name:"PickupForm",config:formConfig,defaults:defaultPickupPersonState,validationErrors:formValidationErrors,handleUpdate:handleUpdate}))));};export default PickupContactForm;