@shopgate/engage/account/components/Profile/ProfileForm.js

Shopgate's ENGAGE library.

function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return obj;}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,{useMemo,useCallback,forwardRef}from'react';import{css}from'glamor';import{i18n}from'@shopgate/engage/core';import{responsiveMediaQuery}from'@shopgate/engage/styles';import{FormBuilder,RippleButton}from'@shopgate/engage/components';import{StylePresets}from'@shopgate/engage/components/Form';import{useProfileContext}from"./Profile.provider";import generateFormConfig from"./Profile.config";var styles={root:css({display:'flex',flexDirection:'column',marginBottom:16}).toString(),form:css(_extends({},StylePresets.OUTLINED_FORM_FIELDS,{},StylePresets.TWO_COLUMN_LAYOUT,{' .container-checkbox':_defineProperty({},responsiveMediaQuery('>=md',{webOnly:false}),{marginRight:'50%'})})).toString(),button:css({'&&':_defineProperty({marginTop:8,marginRight:16,backgroundColor:'var(--color-primary)',borderRadius:5,fontSize:14,textTransform:'none',padding:0},responsiveMediaQuery('<md',{webOnly:false}),{marginRight:0})}).toString(),buttonDelete:css({'&&':_defineProperty({marginTop:8,marginRight:16,border:'1px solid var(--color-state-alert)',backgroundColor:'#fff',color:'var(--color-state-alert)',borderRadius:5,fontSize:14,textTransform:'none',padding:0},responsiveMediaQuery('<md',{webOnly:false}),{marginRight:0})}).toString(),ripple:css({padding:'8px 16px'}).toString(),actions:css(_defineProperty({display:'flex',justifyContent:'flex-end',flexDirection:'row'},responsiveMediaQuery('<md',{webOnly:false}),{marginTop:8,flexDirection:'column-reverse'})).toString()};/**
 * @returns {JSX}
 */var ProfileForm=forwardRef(function(_,ref){var _useProfileContext=useProfileContext(),formState=_useProfileContext.formState,customer=_useProfileContext.customer,saveForm=_useProfileContext.saveForm,deleteCustomer=_useProfileContext.deleteCustomer,validationErrors=_useProfileContext.validationErrors,merchantCustomerAttributes=_useProfileContext.merchantCustomerAttributes,supportedCountries=_useProfileContext.supportedCountries,countrySortOrder=_useProfileContext.countrySortOrder,userLocation=_useProfileContext.userLocation;var formConfig=useMemo(function(){return generateFormConfig({customerAttributes:merchantCustomerAttributes,supportedCountries:supportedCountries,countrySortOrder:countrySortOrder,userLocation:userLocation});},[countrySortOrder,merchantCustomerAttributes,supportedCountries,userLocation]);/* eslint-disable react-hooks/exhaustive-deps */var handleUpdate=useCallback(function(values){formState.setValues(values);},[formState.setValues]);/* eslint-enable react-hooks/exhaustive-deps */if(!customer){return null;}return React.createElement("div",{className:styles.root,ref:ref},React.createElement(FormBuilder,{name:"ProfileForm",className:styles.form,config:formConfig,defaults:customer,validationErrors:validationErrors,handleUpdate:handleUpdate}),React.createElement("div",{className:styles.actions},React.createElement(RippleButton,{className:styles.buttonDelete,rippleClassName:styles.ripple,type:"primary",onClick:deleteCustomer},i18n.text('account.profile.delete')),React.createElement(RippleButton,{className:styles.button,rippleClassName:styles.ripple,type:"primary",onClick:saveForm},i18n.text('account.profile.form.save'))));});export default ProfileForm;