@commercelayer/react-components 3.2.0 → 3.2.4

package/README.md

@@ -65,7 +65,7 @@ The code snippets below show how to put into action Commerce Layer React Compone
 - [Shopping cart](#shopping-cart)
 - [Cart summary](#cart-summary)
 
-Under the hood, our React components are built on top of [Commerce Layer JS SDK](https://github.com/commercelayer/commercelayer-js-sdk) — feel free to use it if you want to develop your custom ones.
+Under the hood, our React components are built on top of [Commerce Layer JS SDK](https://github.com/commercelayer/commercelayer-sdk) — feel free to use it if you want to develop your custom ones.
 
 ## Prices
 
@@ -105,7 +105,7 @@ import {
 
 You can style the selling price and the full price as you like by passing the `className` and `compareClassName` props to the `Price` component. You can choose not to show the full price by passing `showCompare={false}` (default is `true`).
 
-If you need to paginate the list of prices, pass the `perPage` prop to the `PricesContainer` component (default is `10`) — to learn how pagination works, check our [API reference](https://docs.commercelayer.io/api/pagination) or our [SDK documentation](https://github.com/commercelayer/commercelayer-js-sdk#how-to-paginate-a-collection-of-skus).
+If you need to paginate the list of prices, pass the `perPage` prop to the `PricesContainer` component (default is `10`) — to learn how pagination works, check our [documentation](https://docs.commercelayer.io/api/pagination).
 
 ## Add to cart
 
@@ -186,7 +186,7 @@ When you add a product to your shopping cart:
 
 > A common best practice — especially for multi-country ecommerce — is to use as `persistKey` a key containing the country code, so that you have a different shopping cart for each country.
 
-If you need to set some of the [order object](https://docs.commercelayer.io/api/resources/orders/create_order) attributes at the moment of the order creation, pass to the optional prop `attributes` to the `OrderContainer` component.
+If you need to set some of the [order object](https://docs.commercelayer.io/developers/v/api-reference/orders/object) attributes at the moment of the order creation, pass to the optional prop `attributes` to the `OrderContainer` component.
 
 ## Shopping cart
 

package/lib/components/AddressStateSelector.js

@@ -1 +1 @@
-import{__rest}from"tslib";import{jsx as _jsx}from"react/jsx-runtime";import{useContext,useEffect,useState}from"react";import BaseSelect from"./utils/BaseSelect";import components from"../config/components";import BillingAddressFormContext from"../context/BillingAddressFormContext";import ShippingAddressFormContext from"../context/ShippingAddressFormContext";import isEmpty from"lodash/isEmpty";import{getStateOfCountry,isValidState}from"../utils/countryStateCity";import isEmptyStates from"../utils/isEmptyStates";import AddressesContext from"../context/AddressContext";import BaseInput from"./utils/BaseInput";const propTypes=components.AddressStateSelector.propTypes,defaultProps=components.AddressStateSelector.defaultProps,displayName=components.AddressStateSelector.displayName,AddressStateSelector=props=>{var _a;const{required=!0,value,name,className,inputClassName,selectClassName}=props,p=__rest(props,["required","value","name","className","inputClassName","selectClassName"]),billingAddress=useContext(BillingAddressFormContext),shippingAddress=useContext(ShippingAddressFormContext),{errors:addressErrors}=useContext(AddressesContext),[hasError,setHasError]=useState(!1),[countryCode,setCountryCode]=useState(""),[val,setVal]=useState(value||"");useEffect(()=>{var _a2,_b,_c,_d,_e,_f,_g,_h,_j;const billingCountryCode=((_b=(_a2=billingAddress==null?void 0:billingAddress.values)===null||_a2===void 0?void 0:_a2.billing_address_country_code)===null||_b===void 0?void 0:_b.value)||((_c=billingAddress==null?void 0:billingAddress.values)===null||_c===void 0?void 0:_c.country_code);!isEmpty(billingCountryCode)&&billingCountryCode!==countryCode&&setCountryCode(billingCountryCode);const shippingCountryCode=(_e=(_d=shippingAddress==null?void 0:shippingAddress.values)===null||_d===void 0?void 0:_d.shipping_address_country_code)===null||_e===void 0?void 0:_e.value;if(!isEmpty(shippingCountryCode)&&shippingCountryCode!==countryCode&&setCountryCode(shippingCountryCode),[!isEmpty(billingAddress),billingCountryCode,countryCode!==billingCountryCode].every(Boolean)&&!isValidState(val,billingCountryCode)&&(billingAddress.resetField&&billingAddress.resetField(name),setVal("")),[!isEmpty(shippingAddress),shippingCountryCode,countryCode!==shippingCountryCode].every(Boolean)&&!isValidState(val,shippingCountryCode)&&(shippingAddress.resetField&&shippingAddress.resetField(name),setVal("")),!isEmpty(billingAddress)){const fieldError=(_g=(_f=billingAddress==null?void 0:billingAddress.errors)===null||_f===void 0?void 0:_f[name])===null||_g===void 0?void 0:_g.error;setHasError(!!fieldError)}if(!isEmpty(shippingAddress)){const fieldError=(_j=(_h=shippingAddress==null?void 0:shippingAddress.errors)===null||_h===void 0?void 0:_h[name])===null||_j===void 0?void 0:_j.error;setHasError(!!fieldError)}return()=>{setHasError(!1)}},[value,billingAddress,shippingAddress,addressErrors]);const errorClassName=(billingAddress==null?void 0:billingAddress.errorClassName)||(shippingAddress==null?void 0:shippingAddress.errorClassName),classNameComputed=isEmptyStates(countryCode)?`${className} ${inputClassName} ${hasError?errorClassName:""}`:`${className} ${selectClassName} ${hasError?errorClassName:""}`;return isEmptyStates(countryCode)?_jsx(BaseInput,Object.assign({},p,{name,ref:(billingAddress==null?void 0:billingAddress.validation)||(shippingAddress==null?void 0:shippingAddress.validation),className:classNameComputed,required,placeholder:((_a=p.placeholder)===null||_a===void 0?void 0:_a.label)||"",defaultValue:val,type:"text"}),void 0):_jsx(BaseSelect,Object.assign({},p,{className:classNameComputed,ref:(billingAddress==null?void 0:billingAddress.validation)||(shippingAddress==null?void 0:shippingAddress.validation),required,options:getStateOfCountry(countryCode),name,value:val}),void 0)};AddressStateSelector.propTypes=propTypes,AddressStateSelector.defaultProps=defaultProps,AddressStateSelector.displayName=displayName;export default AddressStateSelector;
+import{__rest}from"tslib";import{jsx as _jsx}from"react/jsx-runtime";import{useContext,useEffect,useState}from"react";import BaseSelect from"./utils/BaseSelect";import components from"../config/components";import BillingAddressFormContext from"../context/BillingAddressFormContext";import ShippingAddressFormContext from"../context/ShippingAddressFormContext";import isEmpty from"lodash/isEmpty";import{getStateOfCountry,isValidState}from"../utils/countryStateCity";import isEmptyStates from"../utils/isEmptyStates";import AddressesContext from"../context/AddressContext";import BaseInput from"./utils/BaseInput";const propTypes=components.AddressStateSelector.propTypes,defaultProps=components.AddressStateSelector.defaultProps,displayName=components.AddressStateSelector.displayName,AddressStateSelector=props=>{var _a;const{required=!0,value,name,className,inputClassName,selectClassName}=props,p=__rest(props,["required","value","name","className","inputClassName","selectClassName"]),billingAddress=useContext(BillingAddressFormContext),shippingAddress=useContext(ShippingAddressFormContext),{errors:addressErrors}=useContext(AddressesContext),[hasError,setHasError]=useState(!1),[countryCode,setCountryCode]=useState(""),[val,setVal]=useState(value||"");useEffect(()=>{var _a2,_b,_c,_d,_e,_f,_g,_h,_j;const billingCountryCode=((_b=(_a2=billingAddress==null?void 0:billingAddress.values)===null||_a2===void 0?void 0:_a2.billing_address_country_code)===null||_b===void 0?void 0:_b.value)||((_c=billingAddress==null?void 0:billingAddress.values)===null||_c===void 0?void 0:_c.country_code);!isEmpty(billingCountryCode)&&billingCountryCode!==countryCode&&setCountryCode(billingCountryCode);const shippingCountryCode=(_e=(_d=shippingAddress==null?void 0:shippingAddress.values)===null||_d===void 0?void 0:_d.shipping_address_country_code)===null||_e===void 0?void 0:_e.value;if(!isEmpty(shippingCountryCode)&&shippingCountryCode!==countryCode&&setCountryCode(shippingCountryCode),[!isEmpty(billingAddress),billingCountryCode,countryCode!==billingCountryCode].every(Boolean)&&!isValidState(val,billingCountryCode)&&!isEmptyStates(billingCountryCode)&&(billingAddress.resetField&&billingAddress.resetField(name),setVal("")),[!isEmpty(shippingAddress),shippingCountryCode,countryCode!==shippingCountryCode].every(Boolean)&&!isValidState(val,shippingCountryCode)&&!isEmptyStates(shippingCountryCode)&&(shippingAddress.resetField&&shippingAddress.resetField(name),setVal("")),!isEmpty(billingAddress)){const fieldError=(_g=(_f=billingAddress==null?void 0:billingAddress.errors)===null||_f===void 0?void 0:_f[name])===null||_g===void 0?void 0:_g.error;setHasError(!!fieldError)}if(!isEmpty(shippingAddress)){const fieldError=(_j=(_h=shippingAddress==null?void 0:shippingAddress.errors)===null||_h===void 0?void 0:_h[name])===null||_j===void 0?void 0:_j.error;setHasError(!!fieldError)}return()=>{setHasError(!1)}},[value,billingAddress,shippingAddress,addressErrors]);const errorClassName=(billingAddress==null?void 0:billingAddress.errorClassName)||(shippingAddress==null?void 0:shippingAddress.errorClassName),classNameComputed=isEmptyStates(countryCode)?`${className} ${inputClassName} ${hasError?errorClassName:""}`:`${className} ${selectClassName} ${hasError?errorClassName:""}`;return isEmptyStates(countryCode)?_jsx(BaseInput,Object.assign({},p,{name,ref:(billingAddress==null?void 0:billingAddress.validation)||(shippingAddress==null?void 0:shippingAddress.validation),className:classNameComputed,required,placeholder:((_a=p.placeholder)===null||_a===void 0?void 0:_a.label)||"",defaultValue:val,type:"text"}),void 0):_jsx(BaseSelect,Object.assign({},p,{className:classNameComputed,ref:(billingAddress==null?void 0:billingAddress.validation)||(shippingAddress==null?void 0:shippingAddress.validation),required,options:getStateOfCountry(countryCode),name,value:val}),void 0)};AddressStateSelector.propTypes=propTypes,AddressStateSelector.defaultProps=defaultProps,AddressStateSelector.displayName=displayName;export default AddressStateSelector;

package/lib/components/BillingAddressForm.js

@@ -1 +1 @@
-import{__rest}from"tslib";import{jsx as _jsx}from"react/jsx-runtime";import AddressesContext from"../context/AddressContext";import useRapidForm from"rapid-form";import{useContext,useEffect,useRef}from"react";import BillingAddressFormContext from"../context/BillingAddressFormContext";import{isEmpty}from"lodash";import components from"../config/components";import OrderContext from"../context/OrderContext";import{getSaveBillingAddressToAddressBook}from"../utils/localStorage";import{businessMandatoryField}from"../utils/validateFormFields";const propTypes=components.BillingAddressForm.propTypes,BillingAddressForm=props=>{const{children,errorClassName,autoComplete="on",reset=!1}=props,p=__rest(props,["children","errorClassName","autoComplete","reset"]),{validation,values,errors,reset:resetForm}=useRapidForm(),{setAddressErrors,setAddress,isBusiness}=useContext(AddressesContext),{saveAddressToCustomerAddressBook,order,include,addResourceToInclude,includeLoaded}=useContext(OrderContext),ref=useRef(null);useEffect(()=>{var _a,_b,_c;if((include==null?void 0:include.includes("billing_address"))?(includeLoaded==null?void 0:includeLoaded.billing_address)||addResourceToInclude({newResourceLoaded:{billing_address:!0}}):addResourceToInclude({newResource:"billing_address"}),isEmpty(errors)){if(!isEmpty(values)){setAddressErrors([],"billing_address");for(const name in values){const field=values[name];businessMandatoryField(name,isBusiness)||delete values[name],(field==null?void 0:field.value)&&(values[name.replace("billing_address_","")]=field.value,delete values[name]),(field==null?void 0:field.type)==="checkbox"&&(delete values[name],saveAddressToCustomerAddressBook({type:"billing_address",value:field.checked}))}console.log("values",values),setAddress({values:Object.assign(Object.assign({},values),isBusiness&&{business:isBusiness}),resource:"billing_address"})}}else{const formErrors=[];for(const fieldName in errors){const{code,message}=errors[fieldName];["billing_address_state_code"].includes(fieldName)?isEmpty(values.state_code)?delete errors[fieldName]:formErrors.push({code,message,resource:"billing_address",field:fieldName}):formErrors.push({code,message,resource:"billing_address",field:fieldName})}setAddressErrors(formErrors,"billing_address")}const checkboxChecked=((_b=(_a=ref.current)===null||_a===void 0?void 0:_a.querySelector('[name="billing_address_save_to_customer_book"]'))===null||_b===void 0?void 0:_b.checked)||getSaveBillingAddressToAddressBook();reset&&(!isEmpty(values)||!isEmpty(errors)||checkboxChecked)&&(saveAddressToCustomerAddressBook&&saveAddressToCustomerAddressBook({type:"billing_address",value:!1}),ref&&((_c=ref.current)===null||_c===void 0||_c.reset(),resetForm({target:ref.current}),setAddressErrors([],"billing_address"),setAddress({values:{},resource:"billing_address"})))},[errors,values,reset,include,includeLoaded,isBusiness]);const providerValues={isBusiness,values,validation,setValue:(name,value)=>{const field={[name.replace("billing_address_","")]:value};setAddress({values:Object.assign(Object.assign(Object.assign({},values),field),isBusiness&&{business:isBusiness}),resource:"billing_address"})},errorClassName,requiresBillingInfo:(order==null?void 0:order.requires_billing_info)||!1,errors,resetField:name=>resetForm({currentTarget:ref.current},name)};return _jsx(BillingAddressFormContext.Provider,Object.assign({value:providerValues},{children:_jsx("form",Object.assign({ref,autoComplete},p,{children}),void 0)}),void 0)};BillingAddressForm.propTypes=propTypes;export default BillingAddressForm;
+import{__rest}from"tslib";import{jsx as _jsx}from"react/jsx-runtime";import AddressesContext from"../context/AddressContext";import useRapidForm from"rapid-form";import{useContext,useEffect,useRef}from"react";import BillingAddressFormContext from"../context/BillingAddressFormContext";import{isEmpty}from"lodash";import components from"../config/components";import OrderContext from"../context/OrderContext";import{getSaveBillingAddressToAddressBook}from"../utils/localStorage";import{businessMandatoryField}from"../utils/validateFormFields";const propTypes=components.BillingAddressForm.propTypes,BillingAddressForm=props=>{const{children,errorClassName,autoComplete="on",reset=!1}=props,p=__rest(props,["children","errorClassName","autoComplete","reset"]),{validation,values,errors,reset:resetForm}=useRapidForm(),{setAddressErrors,setAddress,isBusiness}=useContext(AddressesContext),{saveAddressToCustomerAddressBook,order,include,addResourceToInclude,includeLoaded}=useContext(OrderContext),ref=useRef(null);useEffect(()=>{var _a,_b,_c;if((include==null?void 0:include.includes("billing_address"))?(includeLoaded==null?void 0:includeLoaded.billing_address)||addResourceToInclude({newResourceLoaded:{billing_address:!0}}):addResourceToInclude({newResource:"billing_address"}),isEmpty(errors)){if(!isEmpty(values)){setAddressErrors([],"billing_address");for(const name in values){const field=values[name];businessMandatoryField(name,isBusiness)||delete values[name],(field==null?void 0:field.value)&&(values[name.replace("billing_address_","")]=field.value,delete values[name]),(field==null?void 0:field.type)==="checkbox"&&(delete values[name],saveAddressToCustomerAddressBook({type:"billing_address",value:field.checked}))}setAddress({values:Object.assign(Object.assign({},values),isBusiness&&{business:isBusiness}),resource:"billing_address"})}}else{const formErrors=[];for(const fieldName in errors){const{code,message}=errors[fieldName];["billing_address_state_code"].includes(fieldName)?isEmpty(values.state_code)?delete errors[fieldName]:formErrors.push({code,message,resource:"billing_address",field:fieldName}):formErrors.push({code,message,resource:"billing_address",field:fieldName})}setAddressErrors(formErrors,"billing_address")}const checkboxChecked=((_b=(_a=ref.current)===null||_a===void 0?void 0:_a.querySelector('[name="billing_address_save_to_customer_book"]'))===null||_b===void 0?void 0:_b.checked)||getSaveBillingAddressToAddressBook();reset&&(!isEmpty(values)||!isEmpty(errors)||checkboxChecked)&&(saveAddressToCustomerAddressBook&&saveAddressToCustomerAddressBook({type:"billing_address",value:!1}),ref&&((_c=ref.current)===null||_c===void 0||_c.reset(),resetForm({target:ref.current}),setAddressErrors([],"billing_address"),setAddress({values:{},resource:"billing_address"})))},[errors,values,reset,include,includeLoaded,isBusiness]);const providerValues={isBusiness,values,validation,setValue:(name,value)=>{const field={[name.replace("billing_address_","")]:value};setAddress({values:Object.assign(Object.assign(Object.assign({},values),field),isBusiness&&{business:isBusiness}),resource:"billing_address"})},errorClassName,requiresBillingInfo:(order==null?void 0:order.requires_billing_info)||!1,errors,resetField:name=>resetForm({currentTarget:ref.current},name)};return _jsx(BillingAddressFormContext.Provider,Object.assign({value:providerValues},{children:_jsx("form",Object.assign({ref,autoComplete},p,{children}),void 0)}),void 0)};BillingAddressForm.propTypes=propTypes;export default BillingAddressForm;

package/lib/components/ShippingAddressForm.js

@@ -1 +1 @@
-import{__rest}from"tslib";import{jsx as _jsx}from"react/jsx-runtime";import AddressesContext from"../context/AddressContext";import useRapidForm from"rapid-form";import{useContext,useEffect,useRef}from"react";import ShippingAddressFormContext from"../context/ShippingAddressFormContext";import{isEmpty}from"lodash";import components from"../config/components";import OrderContext from"../context/OrderContext";import{getSaveShippingAddressToAddressBook}from"../utils/localStorage";import{businessMandatoryField}from"../utils/validateFormFields";const propTypes=components.ShippingAddressForm.propTypes,ShippingAddressForm=props=>{const{children,errorClassName,autoComplete="on",reset=!1}=props,p=__rest(props,["children","errorClassName","autoComplete","reset"]),{validation,values,errors,reset:resetForm}=useRapidForm(),{setAddressErrors,setAddress,shipToDifferentAddress,isBusiness}=useContext(AddressesContext),{saveAddressToCustomerAddressBook,include,addResourceToInclude,includeLoaded}=useContext(OrderContext),ref=useRef(null);useEffect(()=>{var _a,_b,_c;if((include==null?void 0:include.includes("shipping_address"))?(includeLoaded==null?void 0:includeLoaded.shipping_address)||addResourceToInclude({newResourceLoaded:{shipping_address:!0}}):addResourceToInclude({newResource:"shipping_address"}),isEmpty(errors)){if(!isEmpty(values)&&shipToDifferentAddress){setAddressErrors([],"shipping_address");for(const name in values){const field=values[name];businessMandatoryField(name,isBusiness)||delete values[name],(field==null?void 0:field.value)&&(values[name.replace("shipping_address_","")]=field.value,delete values[name]),(field==null?void 0:field.type)==="checkbox"&&(delete values[name],saveAddressToCustomerAddressBook({type:"shipping_address",value:field.checked}))}setAddress({values:Object.assign(Object.assign({},values),isBusiness&&{business:isBusiness}),resource:"shipping_address"})}}else{const formErrors=[];for(const fieldName in errors){const{code,message}=errors[fieldName];["shipping_address_state_code"].includes(fieldName)?isEmpty(values.state_code)?delete errors[fieldName]:formErrors.push({code,message,resource:"shipping_address",field:fieldName}):formErrors.push({code,message,resource:"shipping_address",field:fieldName})}shipToDifferentAddress&&setAddressErrors(formErrors,"shipping_address")}const checkboxChecked=((_b=(_a=ref.current)===null||_a===void 0?void 0:_a.querySelector('[name="shipping_address_save_to_customer_book"]'))===null||_b===void 0?void 0:_b.checked)||getSaveShippingAddressToAddressBook();reset&&(!isEmpty(values)||!isEmpty(errors)||checkboxChecked)&&(saveAddressToCustomerAddressBook&&saveAddressToCustomerAddressBook({type:"shipping_address",value:!1}),ref&&((_c=ref.current)===null||_c===void 0||_c.reset(),resetForm({target:ref.current}),setAddressErrors([],"shipping_address"),setAddress({values:{},resource:"shipping_address"})))},[values,errors,shipToDifferentAddress,reset,include,includeLoaded,isBusiness]),useEffect(()=>{var _a;ref&&((_a=ref.current)===null||_a===void 0||_a.reset(),resetForm({target:ref.current}),setAddressErrors([],"shipping_address"),setAddress({values:{},resource:"shipping_address"}))},[isBusiness]);const providerValues={values,validation,setValue:(name,value)=>{const field={[name.replace("shipping_address_","")]:value};setAddress({values:Object.assign(Object.assign(Object.assign({},values),field),isBusiness&&{business:isBusiness}),resource:"shipping_address"})},errorClassName,errors,resetField:name=>resetForm({currentTarget:ref.current},name)};return _jsx(ShippingAddressFormContext.Provider,Object.assign({value:providerValues},{children:_jsx("form",Object.assign({ref,autoComplete},p,{children}),void 0)}),void 0)};ShippingAddressForm.propTypes=propTypes;export default ShippingAddressForm;
+import{__rest}from"tslib";import{jsx as _jsx}from"react/jsx-runtime";import AddressesContext from"../context/AddressContext";import useRapidForm from"rapid-form";import{useContext,useEffect,useRef}from"react";import ShippingAddressFormContext from"../context/ShippingAddressFormContext";import{isEmpty}from"lodash";import components from"../config/components";import OrderContext from"../context/OrderContext";import{getSaveShippingAddressToAddressBook}from"../utils/localStorage";import{businessMandatoryField}from"../utils/validateFormFields";const propTypes=components.ShippingAddressForm.propTypes,ShippingAddressForm=props=>{const{children,errorClassName,autoComplete="on",reset=!1}=props,p=__rest(props,["children","errorClassName","autoComplete","reset"]),{validation,values,errors,reset:resetForm}=useRapidForm(),{setAddressErrors,setAddress,shipToDifferentAddress,isBusiness}=useContext(AddressesContext),{saveAddressToCustomerAddressBook,include,addResourceToInclude,includeLoaded}=useContext(OrderContext),ref=useRef(null);useEffect(()=>{var _a,_b,_c;if((include==null?void 0:include.includes("shipping_address"))?(includeLoaded==null?void 0:includeLoaded.shipping_address)||addResourceToInclude({newResourceLoaded:{shipping_address:!0}}):addResourceToInclude({newResource:"shipping_address"}),isEmpty(errors)){if(!isEmpty(values)&&shipToDifferentAddress){setAddressErrors([],"shipping_address");for(const name in values){const field=values[name];businessMandatoryField(name,isBusiness)||delete values[name],(field==null?void 0:field.value)&&(values[name.replace("shipping_address_","")]=field.value,delete values[name]),(field==null?void 0:field.type)==="checkbox"&&(delete values[name],saveAddressToCustomerAddressBook({type:"shipping_address",value:field.checked}))}setAddress({values:Object.assign(Object.assign({},values),isBusiness&&{business:isBusiness}),resource:"shipping_address"})}}else{const formErrors=[];for(const fieldName in errors){const{code,message}=errors[fieldName];["shipping_address_state_code"].includes(fieldName)?isEmpty(values.state_code)?delete errors[fieldName]:formErrors.push({code,message,resource:"shipping_address",field:fieldName}):formErrors.push({code,message,resource:"shipping_address",field:fieldName})}shipToDifferentAddress&&setAddressErrors(formErrors,"shipping_address")}const checkboxChecked=((_b=(_a=ref.current)===null||_a===void 0?void 0:_a.querySelector('[name="shipping_address_save_to_customer_book"]'))===null||_b===void 0?void 0:_b.checked)||getSaveShippingAddressToAddressBook();reset&&(!isEmpty(values)||!isEmpty(errors)||checkboxChecked)&&(saveAddressToCustomerAddressBook&&saveAddressToCustomerAddressBook({type:"shipping_address",value:!1}),ref&&((_c=ref.current)===null||_c===void 0||_c.reset(),resetForm({target:ref.current}),setAddressErrors([],"shipping_address"),setAddress({values:{},resource:"shipping_address"})))},[values,errors,shipToDifferentAddress,reset,include,includeLoaded,isBusiness]);const providerValues={values,validation,setValue:(name,value)=>{const field={[name.replace("shipping_address_","")]:value};setAddress({values:Object.assign(Object.assign(Object.assign({},values),field),isBusiness&&{business:isBusiness}),resource:"shipping_address"})},errorClassName,errors,resetField:name=>resetForm({currentTarget:ref.current},name)};return _jsx(ShippingAddressFormContext.Provider,Object.assign({value:providerValues},{children:_jsx("form",Object.assign({ref,autoComplete},p,{children}),void 0)}),void 0)};ShippingAddressForm.propTypes=propTypes;export default ShippingAddressForm;

package/lib/utils/validateFormFields.js

@@ -1 +1 @@
-import isEmpty from"lodash/isEmpty";import isString from"lodash/isString";import without from"lodash/without";import keys from"lodash/keys";import map from"lodash/map";import get from"lodash/get";import{addressFields}from"../reducers/AddressReducer";const EMAIL_PATTERN=/[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$/;export const validateValue=(val,name,type,resourceType)=>val?type==="email"&&isString(val)&&!val.match(EMAIL_PATTERN)?{field:name,code:"VALIDATION_ERROR",message:`${name} - is not valid`,resourceType}:{}:{field:name,code:"VALIDATION_ERROR",message:`${name} - is required`,resourceType};const validateFormFields=(fields,required,resourceType)=>{const errors=[];let values={metadata:{}};return map(fields,v=>{const isTick=!!get(v,"checked"),val=isTick||(v.value==="on"?!1:v.value),attrName=v.getAttribute("name");if(attrName&&required.indexOf(attrName)!==-1||v.required){const error=validateValue(val,v.name,v.type,resourceType);isEmpty(error)||errors.push(error),values=Object.assign(Object.assign({},values),{[`${v.name}`]:val})}v.getAttribute("name")&&(values=!!v.getAttribute("data-metadata")?Object.assign(Object.assign({},values),{metadata:Object.assign(Object.assign({},values.metadata),{[`${v.name}`]:val})}):Object.assign(Object.assign({},values),{[`${v.name}`]:val}))}),{errors,values}};export const fieldsExist=(address,schema=addressFields)=>{if(address.business){const required=without(schema,"first_name","last_name"),validAddress=keys(address).filter(k=>required.includes(k));return required.length>validAddress.length}else{const required=without(schema,"line_2","company"),validAddress=keys(address).filter(k=>required.includes(k));return required.length>validAddress.length}};const businessOptionalFields=["billing_address_first_name","billing_address_last_name","shipping_address_first_name","shipping_address_last_name","first_name","last_name"],customerOptionalFields=["billing_address_company","billing_address_line_2","shipping_address_company","shipping_address_line_2","company","line_2"];export function businessMandatoryField(fieldName,isBusiness){return!(isBusiness&&businessOptionalFields.includes(fieldName)||!isBusiness&&customerOptionalFields.includes(fieldName))}export default validateFormFields;
+import isEmpty from"lodash/isEmpty";import isString from"lodash/isString";import without from"lodash/without";import keys from"lodash/keys";import map from"lodash/map";import get from"lodash/get";import{addressFields}from"../reducers/AddressReducer";const EMAIL_PATTERN=/[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$/;export const validateValue=(val,name,type,resourceType)=>val?type==="email"&&isString(val)&&!val.match(EMAIL_PATTERN)?{field:name,code:"VALIDATION_ERROR",message:`${name} - is not valid`,resourceType}:{}:{field:name,code:"VALIDATION_ERROR",message:`${name} - is required`,resourceType};const validateFormFields=(fields,required,resourceType)=>{const errors=[];let values={metadata:{}};return map(fields,v=>{const isTick=!!get(v,"checked"),val=isTick||(v.value==="on"?!1:v.value),attrName=v.getAttribute("name");if(attrName&&required.indexOf(attrName)!==-1||v.required){const error=validateValue(val,v.name,v.type,resourceType);isEmpty(error)||errors.push(error),values=Object.assign(Object.assign({},values),{[`${v.name}`]:val})}v.getAttribute("name")&&(values=!!v.getAttribute("data-metadata")?Object.assign(Object.assign({},values),{metadata:Object.assign(Object.assign({},values.metadata),{[`${v.name}`]:val})}):Object.assign(Object.assign({},values),{[`${v.name}`]:val}))}),{errors,values}};export const fieldsExist=(address,schema=addressFields)=>{if(address.business){const required=without(schema,"first_name","last_name"),validAddress=keys(address).filter(k=>required.includes(k));return required.length>validAddress.length}else{const required=without(schema,"line_2","company"),validAddress=keys(address).filter(k=>required.includes(k));return required.length>validAddress.length}};const businessOptionalFields=["billing_address_first_name","billing_address_last_name","shipping_address_first_name","shipping_address_last_name","first_name","last_name"],customerOptionalFields=["billing_address_company","shipping_address_company","company"];export function businessMandatoryField(fieldName,isBusiness){return!(isBusiness&&businessOptionalFields.includes(fieldName)||!isBusiness&&customerOptionalFields.includes(fieldName))}export default validateFormFields;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commercelayer/react-components",
-  "version": "3.2.0",
+  "version": "3.2.4",
   "description": "The Official Commerce Layer React Components",
   "module": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -44,7 +44,9 @@
   "scripts": {
     "test": "jest",
     "test:coverage": "jest --coverage",
-    "test:playwright": "playwright test",
+    "test:e2e": "NODE_ENV=test playwright test",
+    "test:e2e:coverage": "nyc npm run test:e2e && npm run coverage:report",
+    "coverage:report": "nyc report --reporter=html",
     "lint": "eslint src",
     "build": "tsc -b tsconfig.prod.json --verbose",
     "postbuild": "tsc-alias -p tsconfig.prod.json &&  minimize-js lib -w -s",
@@ -80,8 +82,8 @@
   "homepage": "https://github.com/commercelayer/commercelayer-react-components#readme",
   "dependencies": {
     "@ac-dev/countries-service": "^1.1.3",
-    "@ac-dev/states-service": "^1.0.2",
-    "@adyen/adyen-web": "^5.6.2",
+    "@ac-dev/states-service": "^1.0.3",
+    "@adyen/adyen-web": "^5.7.0",
     "@commercelayer/js-auth": "^2.2.9",
     "@commercelayer/sdk": "^3.5.0",
     "@stripe/react-stripe-js": "^1.7.0",
@@ -91,7 +93,7 @@
     "jwt-decode": "^3.1.2",
     "lodash": "^4.17.21",
     "lodash-es": "^4.17.21",
-    "rapid-form": "^1.6.0"
+    "rapid-form": "^1.6.1"
   },
   "devDependencies": {
     "@babel/plugin-proposal-class-properties": "^7.16.7",
@@ -108,33 +110,34 @@
     "@tailwindcss/aspect-ratio": "^0.4.0",
     "@tailwindcss/forms": "^0.4.0",
     "@tailwindcss/line-clamp": "^0.3.1",
-    "@tailwindcss/typography": "^0.5.0",
-    "@types/braintree-web": "^3.75.16",
+    "@tailwindcss/typography": "^0.5.1",
+    "@types/braintree-web": "^3.75.17",
     "@types/jest": "^27.4.0",
     "@types/lodash": "^4.14.178",
-    "@types/node": "^17.0.13",
+    "@types/node": "^17.0.16",
     "@types/prop-types": "^15.7.4",
-    "@types/react": "^17.0.38",
+    "@types/react": "^17.0.39",
     "@types/react-test-renderer": "^17.0.1",
-    "@typescript-eslint/eslint-plugin": "^5.10.1",
-    "@typescript-eslint/parser": "^5.10.1",
+    "@typescript-eslint/eslint-plugin": "^5.11.0",
+    "@typescript-eslint/parser": "^5.11.0",
     "@zeit/next-css": "^1.0.1",
     "@zerollup/ts-transform-paths": "^1.7.18",
     "autoprefixer": "^10.4.2",
-    "babel-jest": "^27.4.6",
+    "babel-jest": "^27.5.1",
     "babel-loader": "^8.2.3",
     "babel-plugin-istanbul": "^6.1.1",
-    "dotenv": "^14.3.2",
-    "eslint": "^8.7.0",
+    "dotenv": "^16.0.0",
+    "eslint": "^8.8.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-config-react-app": "^7.0.0",
     "eslint-plugin-react": "^7.28.0",
     "eslint-plugin-react-hooks": "^4.3.0",
-    "jest": "^27.4.7",
+    "jest": "^27.5.1",
     "minimize-js": "^1.2.0",
-    "next": "^12.0.9",
+    "next": "^12.0.10",
+    "nyc": "^15.1.0",
     "playwright": "^1.18.1",
-    "postcss": "^8.4.5",
+    "postcss": "^8.4.6",
     "postcss-loader": "^6.2.1",
     "prettier": "^2.5.1",
     "prop-types": "^15.8.1",
@@ -143,7 +146,7 @@
     "react-test-renderer": "^17.0.2",
     "rollup-plugin-babel": "^4.4.0",
     "rollup-plugin-node-resolve": "^5.2.0",
-    "tailwindcss": "^3.0.17",
+    "tailwindcss": "^3.0.19",
     "ts-jest": "^27.1.3",
     "ts-loader": "^9.2.6",
     "tsc-alias": "^1.5.0",